Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Superpositions au sol

  1. Introduction
  2. Ajouter une superposition au sol
  3. Effacer une superposition au sol

Introduction

Les superpositions sont des objets qui, sur une carte, sont liés aux coordonnées de latitude/longitude. Elles se déplacent donc lorsque vous faites glisser une carte ou effectuez un zoom. Si vous souhaitez placer une image sur une carte, vous pouvez utiliser un objet GroundOverlay.

Pour plus d'informations sur d'autres types de superpositions, voir Dessiner sur la carte.

Ajouter une superposition au sol

Pour un objet GroundOverlay, le constructeur définit l'URL d'une image ainsi que les valeurs LatLngBounds de l'image comme paramètres. L'image est affichée sur la carte, limitée aux valeurs de latitude/longitude définies et adaptée en utilisant la projection de la carte.

// 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);
}

Voir l'exemple (groundoverlay-simple.html)

Effacer une superposition au sol

Pour effacer une superposition d'une carte, appliquez la méthode setMap() à la superposition, en utilisant la valeur null. Notez que si vous utilisez cette méthode, cela ne supprime pas la superposition. Cela l'efface simplement de la carte. Si vous souhaitez supprimer la superposition, vous devez d'abord l'effacer de la carte, puis la définir elle-même sur null.

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

Voir l'exemple (overlay-remove.html)

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.