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

Service Maximum Zoom Imagery

  1. Maximum Zoom Imagery
  2. Requêtes MaxZoom
  3. Réponses MaxZoom

Présentation

Google Maps API fournit des tuiles de carte à différents niveaux de zoom pour les images des types de carte. La plupart des images de carte routière sont, par exemple, disponibles aux niveaux de zoom 0 à 18. Les images satellite varient davantage car elles ne sont pas générées, mais directement photographiées.

Étant donné que les images satellite ne sont pas toujours disponibles aux niveaux de zoom élevés pour les lieux reculés, par exemple les zones à faible densité de population ou les espaces océaniques ouverts, vous pourriez avoir besoin de connaître à l'avance le niveau de zoom le plus élevé pour les images à un point géographique donné. L'objet MaxZoomService fournit une interface simple pour connaître le niveau de zoom maximal à un point géographique donné pour lequel Google Maps propose des images satellite.

Requêtes MaxZoom

Étant donné que Google Maps API doit appeler un serveur externe, l'accès à l'objet MaxZoomService est asynchrone. Pour cette raison, vous devez définir une méthode de rappel à exécuter à la fin de la requête. Cette méthode de rappel doit traiter le résultat.

Pour lancer une requête au service MaxZoomService, il vous suffit d'appeler la méthode getMaxZoomAtLatLng(), de transmettre les valeurs LatLng du point géographique et de définir la fonction de rappel à exécuter à la fin de la requête.

Réponses MaxZoom

Lorsque la méthode getMaxZoomAtLatLng() exécute la fonction de rappel, elle transmet en retour deux paramètres :

  • status indique la valeur MaxZoomStatus de la requête.
  • zoom indique le niveau de zoom. En cas d'échec du service, aucune valeur ne sera indiquée.

Le code status peut renvoyer l'une des valeurs suivantes :

  • OK indique que le service a trouvé le niveau de zoom maximal pour les images satellite.
  • ERROR indique que la requête MaxZoom n'a pas pu être traitée.

L'exemple suivant montre une carte de la zone métropolitaine de Tokyo. Un clic sur un point de la carte indique le niveau de zoom maximal de ce point géographique. (Les niveaux de zoom autour de Tokyo varient généralement de 18 à 21.)

var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(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>
var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

Voir l'exemple (maxzoom-simple.html)

Envoyer des commentaires concernant…

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