Sobreposições do Google Maps
Google Maps - Sobreposições
As sobreposições são objetos no mapa que estão vinculados às coordenadas de latitude/longitude.
O Google Maps tem vários tipos de sobreposições:
- Marcador - locais únicos em um mapa. Os marcadores também podem exibir imagens de ícones personalizados
- Polilinha - Série de linhas retas em um mapa
- Polígono - Série de linhas retas em um mapa e a forma é "fechada"
- Círculo e retângulo
- Janelas de informações - Exibe o conteúdo em um balão pop-up na parte superior de um mapa
- Sobreposições personalizadas
Google Maps - Adicionar um marcador
O construtor Marker cria um marcador. Observe que a propriedade position deve ser definida para que o marcador seja exibido.
Adicione o marcador ao mapa usando o método setMap():
Exemplo
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - Animar o marcador
O exemplo abaixo mostra como animar o marcador com a propriedade animation:
Exemplo
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Ícone em vez de marcador
O exemplo abaixo especifica uma imagem (ícone) a ser usada em vez do marcador padrão:
Exemplo
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polilinha
Uma polilinha é uma linha que é desenhada através de uma série de coordenadas em uma sequência ordenada.
Uma polilinha suporta as seguintes propriedades:
- path - especifica várias coordenadas de latitude/longitude para a linha
- strokeColor - especifica uma cor hexadecimal para a linha (formato: "#FFFFFF")
- strokeOpacity - especifica a opacidade da linha (um valor entre 0,0 e 1,0)
- strokeWeight - especifica o peso do traço da linha em pixels
- editável - define se a linha é editável pelos usuários (verdadeiro/falso)
Exemplo
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Polígono
Um polígono é semelhante a uma polilinha, pois consiste em uma série de coordenadas em uma sequência ordenada. No entanto, os polígonos são projetados para definir regiões dentro de um loop fechado.
Os polígonos são feitos de linhas retas e a forma é "fechada" (todas as linhas se conectam).
Um polígono suporta as seguintes propriedades:
- path - especifica várias coordenadas LatLng para a linha (a primeira e a última coordenada são iguais)
- strokeColor - especifica uma cor hexadecimal para a linha (formato: "#FFFFFF")
- strokeOpacity - especifica a opacidade da linha (um valor entre 0,0 e 1,0)
- strokeWeight - especifica o peso do traço da linha em pixels
- fillColor - especifica uma cor hexadecimal para a área dentro da região delimitada (formato: "#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 pelos usuários (verdadeiro/falso)
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
});
Google Maps - Círculo
Um círculo suporta as seguintes propriedades:
- center - especifica o 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 (formato: "#FFFFFF")
- strokeOpacity - especifica a opacidade da cor do traço (um valor entre 0,0 e 1,0)
- strokeWeight - especifica o peso do traço da linha em pixels
- fillColor - especifica uma cor hexadecimal para a área dentro do círculo (formato: "#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 pelos usuários (verdadeiro/falso)
Exemplo
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Janela de informações
Mostre uma InfoWindow com algum conteúdo de texto para um marcador:
Exemplo
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);