Si vous intégrez une Google Map mais qu'elle reste vide, vérifiez bien :

• que les scripts javascript Google sont bien chargés
• que l'initialisation de la google Map est correcte, sans oublier les paramètres center et zoom.

Voici l'exemple fourni par Google dans la documentation.

Lorsque vous affichez plusieurs points (= marqueurs) sur une Google Map, vous voulez en général que la carte soit suffisamment dézoomée pour permettre de les afficher tous.

Carte par défaut

Pour afficher une carte avec plusieurs marqueurs, vous pouvez suivre le deuxième exemple de cet article.

Pour rappel, le code javascript utilisé est celui-ci :

function initMap() {

    // Création de la carte
    var paris_latlong = {lat: 48.866667, lng: 2.333333};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: paris_latlong
    });

    // Ajout de marqueurs
    var markerList = [
        { lat: 48.837347, lng: 2.291787, title: "Marqueur n°1" },
        { lat: 48.879681, lng: 2.379958, title: "Marqueur n°2" },
        { lat: 48.822399, lng: 2.498793, title: "Marqueur n°3" }
    ];

    for (var i = 0, length = markerList.length; i < length; i++) {
        var latLng = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: markerList[i].title
        });
    }
}

Par défaut, le centre et le niveau de zoom sont définis lors de l'initialisation de la carte. Il serait plus intéressant que ces valeurs soit calculées automatiquement.

Limiter la carte

Pour cela Google Map permet de définir les limites de la carte : les bounds.

Le code est alors légèrement modifié :

function initMap() {

    // Création de la carte
    var paris_latlong = {lat: 48.866667, lng: 2.333333};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: paris_latlong
    });

    // Initialisation des limites de la carte
    var bounds = new google.maps.LatLngBounds();

    // Ajout de marqueurs
    var markerList = [
        { lat: 48.837347, lng: 2.291787, title: "Marqueur n°1" },
        { lat: 48.879681, lng: 2.379958, title: "Marqueur n°2" },
        { lat: 48.822399, lng: 2.498793, title: "Marqueur n°3" }
    ];

    for (var i = 0, length = markerList.length; i < length; i++) {
        var latLng = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: markerList[i].title
        });

        // Ajout des coordonnées du marqueur aux limites
        bounds.extend(markerList[i].lat, markerList[i].lng);
    }

    // Application des limites à la carte
    map.fitBounds(bounds);
}

Explications :

• On instancie un objet limites (= LatLngBounds) et on lui transmet les coordonnées de tous les marqueurs affichés.
• On demande ensuite à la carte de respecter ces limites.

On obtient alors ce résultat :

Si on enlève le 3ème marqueur, la carte est automatiquement recentrée :

Inconvénient

Le problème de cette technique, c'est que si vous n'affichez qu'un seul point, le zoom sera très important :

Zoom maximal fixe

La solution la plus simple est d'ajouter un zoom maximal à la carte, lors de son initialisation :

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: paris_latlong,
    maxZoom: 11
});

Inconvénient

Le gros problème, c'est que l'utilisateur sera bloqué et ne pourra pas zoomer plus que la valeur que vous aurez définie.

Zoom calculé

À la place d'utiliser le zoom maximal, on peut modifier le zoom automatiquement en fonction des limites de la carte :

var zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
    google.maps.event.removeListener(zoomChangeBoundsListener);
    map.setZoom(Math.min( 11, map.getZoom()));
});

Explications :

• On ajoute un écouteur sur l'évènement bounds_changed fourni par Google Map.
• L'écouteur est supprimé afin de laisser l'utilisateur zoomer/dézoomer à sa guise.
• Quand les limites de la carte sont modifiées, le zoom est à nouveau calculé pour ne pas être supérieur à la valeur souhaitée.

Remarque :

Il faut ajouter ce code après l'initialisation de la carte, mais avant d'appeler la méthode fitBounds(). Sans quoi l'écouteur ne captera pas l'évènement.

Voici une liste d'utilisations courantes de l'API Google Map :

• Créer une carte
• Afficher des points (= marqueurs)
• Afficher un point avec un marqueur personnalisé
• Afficher une bulle au clic sur un marqueur (= InfoWindow)

Google Key API

Pour pouvoir utiliser l'API Google, vous devez tout d'abord avoir un compte Google et générer une clé.

• Rendez-vous à cette adresse et connectez-vous à votre compte Google
• Créez un nouveau projet en cliquant sur Continuer
• Renseignez les noms de domaines qui auront le droit d'utiliser la clé (ex: *.mon-site.com, 127.0.0.1, localhost, ...)

• Copiez la clé de l'API :

  

Une carte basique

Voici le code HTML/Javascript pour afficher une carte simple, sans marqueur :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
       #map {
        height: 400px;
        width: 600px;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
    function initMap() {
        var paris_latlong = {lat: 48.866667, lng: 2.333333};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: paris_latlong
        });
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

Explications :

• Le code HTML ne contient qu'un élément div, dans lequel la carte sera générée en javascript. Cet élément doit avoir une largeur et une hauteur (cf. CSS).
• On inclue la lib javascript de Google, en lui passant la clé générée précédemment.
• Le code générant la carte ne sera exécuté qu'une fois toute la page chargée
• Une fois le script chargé, la fonction initMap() est appelée en callback.
• Pour initialiser la carte, il faut fournir au moins deux paramètres : les coordonnées du point central de la carte (latitude/longitude), et le niveau du zoom à appliquer.

Remarque :

Comme présenté dans la documentation officielle, Google conseille d'indiquer la clé d'API lors de l'appel à la librairie javascript. Il est toutefois possible de s'en passer (en phase de test par exemple), en modifiant l'URL :

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Afficher des marqueurs

Si on veut afficher des marqueurs, le code javascript devient :

function initMap() {

    // Création de la carte
    var paris_latlong = {lat: 48.866667, lng: 2.333333};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: paris_latlong
    });

    // Ajout de marqueurs
    var markerList = [
        { lat: 48.837347, lng: 2.291787, title: "Marqueur n°1" },
        { lat: 48.879681, lng: 2.379958, title: "Marqueur n°2" },
        { lat: 48.822399, lng: 2.498793, title: "Marqueur n°3" }
    ];

    for (var i = 0, length = markerList.length; i < length; i++) {
        var latLng = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: markerList[i].title
        });
    }
}

Explications :

• On initialise un tableau contenant la liste des marqueurs, avec leurs coordonnées (latitude/longitude) et un libellé à afficher au survol (title).
• On parcourt ce tableau et on instancie des marqueurs, rattachés à la carte créée précédemment.

Remarque :

Pour centrer automatiquement la carte sur ces points, vous pouvez suivre cet article.

Afficher un marqueur personnalisé

Il est agréable d'utiliser ses propres icônes de marqueur.

Pour cela, il n'y a quasiment rien à ajouter :

function initMap() {

    // Création de la carte
    var paris_latlong = {lat: 48.866667, lng: 2.333333};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: paris_latlong
    });

    // Ajout du marqueur
    var marker = new google.maps.Marker({
        position: paris_latlong,
        map: map,
        title: 'Paris',
        icon: 'http://www.devnotebook.fr/public/articles/api-diverses/utiliser-l-api-google-map-06.png'
    });
}

Explication :

On a juste ajouté l'attribut icon au marqueur.

Afficher une bulle d'information

Pour afficher une bulle d'information (InfoWindow) au clic sur le marqueur, voici ce que devient le code javascript :

function initMap() {

    // Création de la carte
    var paris_latlong = {lat: 48.866667, lng: 2.333333};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: paris_latlong
    });

    // Ajout du marqueur
    var marker = new google.maps.Marker({
        position: paris_latlong,
        map: map,
        title: 'Paris'
    });

    // Ajout d'une InfoWindow
    var htmlContent = '<div class="info-window-container">';
        htmlContent += ' <h2>Mon marqueur</h2>';
        htmlContent += ' <p>Une petite description</p>';
        htmlContent += ' <p><a href="https://developers.google.com/maps/documentation/javascript/infowindows">Lien vers l\'API Google</a></p>';
        htmlContent += '</div>';
    var infoWindow = new google.maps.InfoWindow({
        content: htmlContent
    });

    marker.addListener('click', function() {
        infoWindow.open(map, marker);
    });
}

Explications :

• On stocke du HTML dans une variable javascript.
• On instancie un objet InfoWindow avec pour contenu ce code HTML.
• On ajoute un écouteur pour l'évènement clic sur le marqueur, pour que l'InfoWindow s'ouvre.

Lorsque vous affichez une Google Map avec beaucoup de points rapprochés, ils risquent de se chevaucher. Pour éviter ce problème, vous pouvez les regrouper en utiliser le MarkerClustering.

L'autre avantage est le temps de chargement de la carte. Puisqu'il y a des regroupements, il y a moins de points à afficher.

Voici un exemple :

À gauche une carte avec beaucoup de points et à droite, la même avec des regroupements.

Pour utiliser le regroupement, il suffit de créer la carte et les points, mettre les points dans un tableau et créer un nouvel objet MarkerClusterer.

Voici un aperçu du code à ajouter pour créer des points regroupés :

// Soit data un tableau d'objets ayant des latitudes et longitudes
var markers = [];
for (var i = 0; i < 100; ++i) {
    var marker = new google.maps.Marker({
      "lat": data[i].lat,
      "long": data[i].long
    });
    markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

Remarque : Il faut également ajouter le fichier markerclusterer.js à votre page.