Adicionar um marcador para o mapa Google:
Google Maps - Sobreposições
Sobreposições são objetos no mapa que são obrigados a coordenadas de latitude / longitude.
Google Maps tem vários tipos de sobreposições:
- Marker - localizações individuais sobre um mapa. Os marcadores também pode exibir ícone personalizado imagens
- Polyline - série de linhas retas em um mapa
- Polygon - série de linhas retas em um mapa, ea forma é "fechado"
- Círculo e Retângulo
- Informações Windows - Exibe o conteúdo dentro de um balão pop-up na parte superior de um mapa
- sobreposições personalizadas
Google Maps - Adicionar um Marcador
O construtor do marcador cria um marcador. (Note que a propriedade position deve ser definida para o marcador para exibir).
Adicione o marcador para o mapa usando a setMap() método:
Exemplo
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Tente você mesmo " Google Maps - animar o marcador
O exemplo abaixo mostra como animar o marcador com a propriedade de animação:
Exemplo
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Tente você mesmo " Google Maps - Ícone Em vez de Marcador
O exemplo a seguir especifica uma imagem (icon) para usar em vez do marcador padrão:
Exemplo
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Tente você mesmo " Google Maps - Polyline
Um polígono é uma linha que é desenhada através de uma série de coordenadas numa sequência ordenada.
A polilinha suporta as seguintes propriedades:
- caminho - especifica coordena vários latitude / longitude para a linha
- strokeColor - especifica uma cor hexadecimal para a linha (format: "#FFFFFF")
- strokeOpacity - especifica a opacidade da linha (um valor entre 0,0 e 1,0)
- strokeWeight - especifica o peso do traçado do linha em pixels
- editável - define se a linha é editável por usuários (true/false)
Exemplo
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Tente você mesmo " Google Maps - Polygon
Um polígono é semelhante a um polígono em que ela consiste de uma série de coordenadas numa sequência ordenada. No entanto, os polígonos são projetados para definir regiões dentro de um circuito fechado.
Polígonos são feitos de linhas retas, e a forma é "closed" (todas as linhas de conectar-se).
Um polígono suporta as seguintes propriedades:
- caminho - especifica coordena vários LatLng para a linha (primeiro e último coordenadas são iguais)
- strokeColor - especifica uma cor hexadecimal para a linha (format: "#FFFFFF")
- strokeOpacity - especifica a opacidade da linha (um valor entre 0,0 e 1,0)
- strokeWeight - especifica o peso do traçado do linha em pixels
- fillColor - especifica uma cor hexadecimal para a área dentro da região delimitada (format: "#FFFFFF")
- fillOpacity - especifica a opacidade da cor de preenchimento (um valor entre 0,0 e 1,0)
- editável - define se a linha é editável por usuários (true/false)
Exemplo
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Tente você mesmo " Google Maps - Circle
Um círculo suporta as seguintes propriedades:
- centro - especifica a google.maps.LatLng do centro do círculo
- raio - especifica o raio do círculo, em metros
- strokeColor - especifica uma cor hexadecimal para a linha ao redor do círculo (format: "#FFFFFF")
- strokeOpacity - especifica a opacidade da cor do traço (um valor entre 0,0 e 1,0)
- strokeWeight - especifica o peso do traçado do linha em pixels
- fillColor - especifica uma cor hexadecimal para a área dentro do círculo (format: "#FFFFFF")
- fillOpacity - especifica a opacidade da cor de preenchimento (um valor entre 0,0 e 1,0)
- editável - define se o círculo é editável por usuários (true/false)
Exemplo
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Tente você mesmo " Google Maps - InfoWindow
Mostrar um InfoWindow com algum conteúdo de texto para um marcador:
Exemplo
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Tente você mesmo " Google Maps - Referência sobreposições
Google Maps API de referência .