recherche

Maison >interface Web >js tutoriel >Comment implémenter facilement plusieurs marqueurs avec InfoWindows sur une carte Google à l'aide de JavaScript ?

Comment implémenter facilement plusieurs marqueurs avec InfoWindows sur une carte Google à l'aide de JavaScript ?

DDD
DDDoriginal
2024-12-31 04:22:09936parcourir

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using JavaScript?

Implémentation simple de plusieurs marqueurs Google Maps en JavaScript

Dans ce didacticiel, nous explorerons une approche simplifiée pour créer plusieurs marqueurs sur une carte Google Map .

Présentation

Pour les débutants qui explorent l'API Google Maps, il peut sembler complexe de tracer plusieurs marqueurs sur une carte. Ce didacticiel fournit une solution simple et directe.

Exemples de données

Utilisons l'exemple de tableau de données de Google :

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

Création du Map

Tout d'abord, nous initialisons un Google Carte :

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

Création de marqueurs

Pour créer plusieurs marqueurs, nous parcourons le tableau d'emplacements :

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

Ajout Pop-up InfoWindows

Nous créons une InfoWindow pour chaque marqueur pour afficher le nom de la plage lorsque vous cliquez dessus :

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

Résultat complet

L'extrait de code complet ci-dessous comprend tous les éléments nécessaires à la fonctionnalité de marqueurs multiples :

// HTML with map container
<!DOCTYPE html>
<html> 
<head> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div>

En suivant ces étapes, vous pouvez facilement tracer plusieurs marqueurs avec des fenêtres d'information contextuelles sur une carte Google.

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!

JavaScript Array for using map this display
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：En quoi « let » et « const » diffèrent-ils de « var » dans le levage JavaScript ?Article suivant：En quoi « let » et « const » diffèrent-ils de « var » dans le levage JavaScript ?

Articles Liés

Voir plus