Camadas de Mapas do Google

Google Maps - Superposteções

Superposteções são objetos na carta que estão ligados às coordenadas de latitude/longitude.

O Google Maps tem vários tipos de superposteções:

• Marcador (Marker) - Uma única posição na carta. O marcador também pode exibir uma imagem de ícone personalizado
• Linha reta (Polyline) - Uma série de retas na carta
• Polígono (Polygon) - Uma série de retas na carta, com forma 'fechada'
• Círculos e retângulos (Circle e Rectangle)
• Janelas de informações (Info Windows) - Exibir conteúdo no balão popup no topo do mapa
• Superposteções personalizadas (Custom overlays)

Google Maps - Adição de marcador

O construtor de Marker pode criar marcadores. Observe que é necessário definir a propriedade position para que o marcador seja exibido.

Use o método setMap() para adicionar o marcador ao mapa:

instância

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - Animação de marcador

O exemplo a seguir mostra como usar a propriedade animation para definir animação para o marcador:

instância

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - Substituição de marcador por ícone

O exemplo a seguir define a imagem (ícone) a ser usada para substituir o marcador padrão:

instância

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - Linha reta

A linha reta é desenhada por uma série de coordenadas ordenadas.

A linha reta suporta as seguintes propriedades:

• path - Definir várias coordenadas de latitude/longitude da linha
• strokeColor - Determina a cor hexadecimal da linha (formato: "#FFFFFF")
• strokeOpacity - Determina a opacidade da linha (valor entre 0.0 e 1.0)
• strokeWeight - Determina a espessura da linha do traço (em pixels)
• editable - Define se a linha pode ser editada pelo usuário (true/false)

instância

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Google Maps - Polígono

O polígono é semelhante ao polígono convexo, formado por uma série de coordenadas dispostas em ordem. No entanto, o polígono é projetado para definir a área dentro do fecho.

O polígono é formado por retas e tem a forma "fechada" (todas as linhas se conectam).

O polígono suporta as seguintes propriedades:

• path - Determina os vários pares de coordenadas de latitude/longitude da linha (o primeiro e o último par de coordenadas são iguais)
• strokeColor - Determina a cor hexadecimal da linha (formato: "#FFFFFF")
• strokeOpacity - Determina a opacidade da linha (valor entre 0.0 e 1.0)
• strokeWeight - Determina a espessura da linha do traço (em pixels)
• fillColor - Determina a cor hexadecimal da área interna do fecho (formato: "#FFFFFF")
• fillOpacity - Determina a opacidade da cor de preenchimento (valor entre 0.0 e 1.0)
• editable - Define se a linha pode ser editada pelo usuário (true/false)

instância

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

O círculo suporta as seguintes propriedades:

• center - Determina o google.maps.LatLng do centro
• radius - Determina o raio do círculo em metros
• strokeColor - Determina a cor hexadecimal da linha ao redor do círculo (formato: "#FFFFFF")
• strokeOpacity - Determina a opacidade da cor do traço (valor entre 0.0 e 1.0)
• strokeWeight - Determina a espessura da linha do traço (em pixels)
• fillColor - Determina a cor hexadecimal da área interna do círculo (formato: "#FFFFFF")
• fillOpacity - Determina a opacidade da cor de preenchimento (valor entre 0.0 e 1.0)
• editable - Define se o usuário pode editar o círculo (true/false)

instância

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

para exibir uma janela de informações com conteúdo de texto no marker:

instância

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);