Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Sobreposições de solo

  1. Introdução
  2. Adicionar uma sobreposição de solo
  3. Remover uma sobreposição de solo

Introdução

As sobreposições são objetos no mapa vinculados a coordenadas de latitude/longitude. Portanto, eles movem-se quando o mapa é arrastado ou seu zoom é alterado. Para posicionar uma imagem em um mapa, use um objeto GroundOverlay.

Para obter informações sobre outros tipos de sobreposição, consulte Desenho no mapa.

Adicionar uma sobreposição de solo

O construtor de uma GroundOverlay especifica um URL de uma imagem e o LatLngBounds da imagem como parâmetros. A imagem é renderizada no mapa, restrita aos limites informados, e adaptada usando a projeção do mapa.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

Ver o exemplo (groundoverlay-simple.html).

Remover uma sobreposição de solo

Para remover uma sobreposição de um mapa, chame o método setMap() da sobreposição passando null. Observe que a chamada desse método não exclui a sobreposição. Ela simplesmente remove a sobreposição do mapa. Em vez disso, para excluir a sobreposição, remova-a do mapa e defina a própria sobreposição como null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Ver o exemplo (overlay-remove.html).

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.