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

Utiliser MySQL et PHP avec Google Maps

Présentation

Ce didacticiel vous explique comment afficher les informations d'une base de données MySQL sur une carte Google en utilisant Google Maps JavaScript API. Il s'adresse aux personnes ayant des connaissances intermédiaires de MySQL, PHP et XML.

La carte utilisée dans ce didacticiel affiche deux types de marqueurs pour identifier séparément des restaurants et des bars. Une base de données MySQL stocke les informations sur les points géographiques des marqueurs individuels, telles que le type de lieu (s'il s'agit d'un restaurant ou d'un bar), son nom, son adresse et ses coordonnées géographiques. La carte récupère ces informations depuis la base de données via un fichier XML qui sert d'intermédiaire entre la base de données et la carte. Vous pouvez utiliser des déclarations PHP pour exporter les informations d'un marqueur depuis la base de données vers un fichier XML.

Cliquez sur un marqueur sur la carte ci-dessous pour afficher une fenêtre d'info avec le nom et l'adresse du lieu. Un libellé « R » ou « B » est affiché sur les marqueurs pour indiquer respectivement les restaurants et les bars sur la carte.

L'exemple ci-dessous montre tout le code dont vous avez besoin pour créer cette carte.

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
<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>

Essayez par vous-même

Placez la souris en haut à droite du bloc de code pour le copier ou l'ouvrir dans JSFiddle.

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* 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;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Premiers pas

Installez et configurez un serveur MySQL en PHP sur votre machine.

Créer un tableau dans MySQL

Dans MySQL, créez un tableau contenant les attributs des marqueurs sur la carte, notamment les attributs id, name, address, lat, lng et type.

L'attribut id sert de clé principale et l'attribut type différencie les restaurants des bars.

Pour réduire au minimum l'espace de stockage occupé par votre tableau, vous pouvez spécifier les attributs lat et lng en tant que valeurs flottantes (10,6). Cela permet aux champs de stocker 6 chiffres après la virgule et jusqu'à 4 chiffres avant la virgule.

Vous pouvez interagir avec la base de données MySQL via l'interface phpMyAdmin. La capture d'écran ci-dessous affiche le tableau configuré dans phpMyAdmin.

Vous pouvez également utiliser les commandes SQL pour créer le tableau, comme dans la déclaration SQL ci-dessous.

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Remplir le tableau

Vous pouvez importer les données des marqueurs dans la base de données SQL en utilisant la fonctionnalité « Import » de l'interface phpMyAdmin, laquelle permet d'importer différents formats de données.

Les données des marqueurs de la carte utilisée dans ce didacticiel sont fournies ci-dessous, au format .csv.

Love.Fish,"580 Darling Street, Rozelle, NSW",-33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-33.874737,151.215530,restaurant

Vous pouvez également utiliser les commandes SQL ci-dessous pour importer les données des marqueurs dans le tableau SQL.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

Exporter les données au format XML avec PHP

À ce stade, vous devez disposer d'un tableau appelé markers contenant les données des marqueurs de la carte. Cette section vous explique comment utiliser des déclarations PHP pour exporter au format XML les données du tableau stockées dans la base de données SQL. La carte peut utiliser le fichier XML pour récupérer les données des marqueurs via des appels JavaScript asynchrones.

Utiliser un fichier XML comme intermédiaire entre votre base de données et votre carte Google permet de charger plus rapidement la page initiale et offre plus de flexibilité à votre application cartographique. Cela simplifie également le débogage, car vous pouvez vérifier indépendamment le fichier XML issu de la base de données et l'analyse JavaScript du fichier XML. Vous pouvez aussi exécuter la carte en vous basant uniquement sur des fichiers XML statiques et ne pas utiliser la base de données MySQL.

Si vous n'avez jamais utilisé le PHP pour vous connecter à une base de données MySQL, consultez le site php.net et renseignez-vous sur les fonctions mysql_connect, mysql_select_db, my_sql_query et mysql_error.

Vous pouvez utiliser n'importe laquelle des trois techniques ci-dessous pour utiliser PHP afin d'exporter les données du tableau SQL au format XML.

Lorsque vous utilisez un navigateur public pour accéder à une base de données à l'aide de fichiers PHP, il est important de veiller à ce que les identifiants de votre base de données soient sécurisés. Vous pouvez pour ce faire mettre les informations de connexion à votre base de données dans un fichier PHP séparé de celui contenant le code PHP principal. Le fichier contenant vos identifiants doit être semblable à l'exemple ci-dessous, mais avec les informations de votre propre base de données.

<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

Utiliser les fonctions DOM XML de PHP pour exporter les données en XML

Les fonctions DOM XML de PHP permettent d'échapper les entités spéciales dans le XML et facilitent la création de code XML avec des structures plus complexes. Vous pouvez utiliser les fonctions DOM XML pour créer des nœuds XML, insérer des nœuds enfant et afficher un document XML à l'écran. Pour déterminer si la fonctionnalité PHP DOM XML est activée sur votre serveur, vérifiez votre configuration ou essayez d'initialiser une fonction domxml_new_doc().

Le fichier PHP qui se connecte à la base de données MySQL et transmet le XML au navigateur est illustré ci-dessous.

<?php
require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $doc->create_element("marker");
  $newnode = $parnode->append_child($node);

  $newnode->set_attribute("name", $row['name']);
  $newnode->set_attribute("address", $row['address']);
  $newnode->set_attribute("lat", $row['lat']);
  $newnode->set_attribute("lng", $row['lng']);
  $newnode->set_attribute("type", $row['type']);
}

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>

Dans le fichier ci-dessus, le code PHP commence par initialiser un nouveau document XML et crée le nœud parent « markers ». Il se connecte ensuite à la base de données, exécute une requête SELECT * (tout sélectionner) sur le tableau de marqueurs et parcourt les résultats. Pour chaque ligne du tableau (chaque lieu), le code crée un nouveau nœud XML avec les attributs de la ligne en tant qu'attributs XML, puis l'ajoute au nœud parent. La dernière partie du code transmet ensuite le XML à l'écran du navigateur.

Remarque : Si votre base de données contient des caractères internationaux ou si vous avez besoin de forcer une sortie au format UTF-8, vous pouvez appliquer la fonction utf8_encode à l'export de données.

Utiliser la fonction echo de PHP pour exporter les données en XML

Si vous n'avez pas accès aux fonctions dom_xml de PHP, vous pouvez exporter le XML avec la fonction echo. Lorsque vous utilisez uniquement la fonction echo, utilisez une fonction d'aide (par ex. parseToXML) pour correctement encoder certaines entités spéciales (<,>,",') afin qu'elles soient compatibles avec le format XML.

Le fichier PHP qui se connecte à la base de données MySQL et transmet le XML au navigateur est illustré ci-dessous.

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

Le code ci-dessus permet de se connecter à la base de données et d'exécuter la requête SELECT * (tout sélectionner) sur le tableau de marqueurs. Il reproduit ensuite le nœud parent markers et parcourt les résultats de la requête. Le code reproduit ensuite le nœud XML du marqueur dans chaque ligne du tableau (chaque lieu). Cela envoie d'abord les champs de nom et d'adresse à la fonction parseToXML au cas où ils contiendraient des entités spéciales. Le script se termine en reproduisant la balise de fermeture markers.

Remarque : Vous pouvez appliquer la fonction utf8_encode à l'export des données XML si votre base de données contient des caractères internationaux ou si vous avez besoin de forcer une sortie au format UTF-8.

Utiliser les fonctions DOM de PHP pour exporter les données en XML

Le fichier PHP qui se connecte à la base de données MySQL et transmet le XML au navigateur est illustré ci-dessous.

<?php

require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

?>

Le code ci-dessus initialise un nouveau document XML et crée le nœud parent « markers ». Il se connecte ensuite à la base de données, exécute une requête SELECT * (tout sélectionner) sur le tableau de marqueurs et parcourt les résultats. Le code crée ensuite un nœud XML pour chaque ligne du tableau (chaque lieu), avec les attributs de la ligne en tant qu'attributs XML, puis l'ajoute au nœud parent. Il transmet ensuite le fichier XML de sortie à l'écran du navigateur.

Remarque : Si votre base de données contient des caractères internationaux ou si vous avez besoin de forcer une sortie au format UTF-8, vous pouvez appliquer la fonction utf8_encode à l'export des données.

Vérifier que le fichier XML de sortie fonctionne

Pour vérifier que le script PHP produit un fichier XML valide, appelez le fichier script PHP que vous avez créé depuis votre navigateur pour afficher le fichier de sortie XML comme suit.

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

Si votre navigateur n'affiche pas au format XML les données des marqueurs issues de votre base de données, essayez de résoudre le problème en supprimant du fichier la ligne qui définit l'en-tête sur le type de contenu text/xml. Cette ligne peut en effet entraîner l'analyse du fichier XML par votre navigateur et rendre difficile l'affichage des messages de débogage.

Créer la carte

Cette section vous explique comment développer l'exemple de carte fourni dans ce didacticiel en utilisant JavaScript et le fichier de sortie XML. Lisez la documentation pour en savoir plus sur les aspects fondamentaux de la création d'une carte Google.

Créez un nouveau fichier dans un éditeur de texte et enregistrez-le en tant que fichier index.html. Lisez les sections ci-dessous pour savoir quel code vous pouvez ajouter à ce fichier.

Charger le fichier XML

Pour charger le fichier XML dans la page, vous pouvez utiliser l'objet XMLHttpRequest fourni par le navigateur. Cet objet vous permet de récupérer un fichier se trouvant sur le même domaine que la page Web d'où est issue la requête et constitue la base de la programmation « AJAX ».

Définissez votre propre fonction pour charger le fichier, et appelez-la downloadUrl(). Cette fonction nécessite deux paramètres :

  1. url spécifie le chemin d'accès vers votre fichier XML ou le script PHP qui génère le fichier, selon que vous souhaitez ou non mettre à jour le fichier XML de façon dynamique lorsque la base de données est modifiée. Dans ce didacticiel, la carte appelle un fichier XML statique pour les données des marqueurs.
    Il est en général plus simple de stocker ce fichier XML dans le même répertoire que le fichier HTML, de manière à pouvoir vous y référer par son seul nom de fichier.
  2. callback désigne la fonction que le script appelle lorsque le fichier XML est renvoyé au fichier JavaScript.

Le code ci-dessous illustre la déclaration de la fonction.

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

Remarque : Étant donné que XMLHttpRequest est asynchrone, la fonction de rappel initie la fonction downloadURL en fonction de la taille du fichier XML. Plus le fichier XML est important, plus cela prend du temps. Il est donc conseillé de ne pas mettre de code après la fonction downloadUrl qui s'appuie sur les marqueurs au sein de la fonction de rappel. À la place, le code peut-être inséré à l'intérieur de la fonction de rappel.

Maintenant que vous avez défini la fonction, vous pouvez l'appeler depuis votre code en lui transmettant le nom de votre fichier PHP et de votre fonction de rappel. Dans ce didacticiel, la carte appelle un fichier XML statique pour les données des marqueurs, comme l'illustre le code ci-dessous.


downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

Créer des marqueurs personnalisés

Le code ci-dessous montre comment ajouter des libellés personnalisés à vos marqueurs en créant d'abord un tableau d'associations. Ce tableau associe les libellés aux chaînes type des marqueurs, c'est-à-dire restaurant ou bar. Cela permet de référencer facilement les libellés lorsque vous créez des marqueurs à partir du fichier XML.

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  }
};

Créer des marqueurs et des fenêtres d'info

Lorsque vous créez des marqueurs, vous pouvez récupérer les libellés appropriés en utilisant la chaîne type en tant que clé pour le tableau associé customLabel. Transférez la propriété .label en tant qu'option du constructeur google.maps.Marker.

Créez ensuite le fichier HTML que vous souhaitez afficher dans la fenêtre d'info en concaténant le nom, l'adresse et les balises HTML pour mettre le nom en valeur.

Si vous stockez des descriptions au format HTML dans votre base de données, il vous faudra probablement échapper des entités HTML et vous serez lié à ce format de sortie HTML. En attendant d'avoir récupéré séparément chaque attribut dans le fichier JavaScript, vous serez libre de jouer avec le fichier HTML côté client et pourrez rapidement prévisualiser tout nouveau formatage.

Après avoir construit la chaîne HTML, le code ci-dessous ajoute au marqueur un écouteur d'événement qui affiche une fenêtre d'info lorsque l'utilisateur clique sur le marqueur.

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

Finaliser le processus

Ouvrez le fichier index.html dans un navigateur. Lorsque la page est en train de charger, la fonction initMap configure la carte puis appelle la fonction downloadUrl. Cette fonction parcourt tous les éléments des marqueurs et récupère les attributs de nom, d'adresse, de type et de latitude/longitude pour chacun.
Le code crée ensuite les marqueurs, les ajoute à la carte et associe une fenêtre d'info à chaque marqueur pour afficher une description lorsque l'utilisateur clique dessus.

Plus d'infos

Si vous souhaitez afficher des marqueurs sur une carte en utilisant vos propres données de géolocalisation, vous pouvez utiliser un service de géocodage par lots pour convertir les adresses en latitudes et longitudes pour vos marqueurs.

Envoyer des commentaires concernant…

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