Comment afficher plusieurs marqueurs avec InfoWindows à l'aide de l'API Google Maps JS v3 ?

API Google Maps JS v3 - Exemple simple de marqueurs multiples

Création d'une carte et de marqueurs

Pour commencer, créez un nouveau fichier HTML et incluez le script API Google Maps avec votre clé API. Ensuite, configurez l'objet Map et fournissez-lui les paramètres nécessaires :

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

Création d'une InfoWindow

Définissez un objet InfoWindow, qui affiche le nom de l'emplacement lors de clic du marqueur :

var infowindow = new google.maps.InfoWindow();

Boucle à travers l'emplacement Données

Ensuite, parcourez votre tableau de données et créez un marqueur pour chaque emplacement, en l'ajoutant à la carte :

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

Définition des événements de clic pour InfoWindows

Enfin, ajoutez un écouteur d'événement à chaque marqueur qui déclenche l'ouverture de l'InfoWindow lorsque cliqué :

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Code complet

Le code complet ressemble à ceci :

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!