recherche

Maison >interface Web >js tutoriel >Comment ajouter facilement plusieurs marqueurs avec des fenêtres d'informations personnalisées à une carte Google à l'aide de l'API Google Maps JS v3 ?

Comment ajouter facilement plusieurs marqueurs avec des fenêtres d'informations personnalisées à une carte Google à l'aide de l'API Google Maps JS v3 ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-18 17:00:11216parcourir

How to Easily Add Multiple Markers with Custom InfoWindows to a Google Map using the Google Maps JS API v3?

API Google Maps JS v3 - Un exemple simple pour plusieurs marqueurs

Créer plusieurs marqueurs sur une carte Google Map peut être une tâche ardue, en particulier pour les nouveaux arrivants dans l'API. Pour simplifier ce processus, nous allons examiner un exemple simple qui vous guidera à travers les étapes nécessaires.

Considérez le tableau de données suivant fourni par Google :

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]
];

L'objectif est de tracer ces marqueurs sur une carte et affiche une infoWindow contenant le nom lorsqu'un marqueur est cliqué.

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <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>

Ce code crée une carte centrée autour de Sydney, en Australie, avec un niveau de zoom de 10. Il génère dynamiquement des marqueurs pour chaque plage du tableau, et chaque marqueur affiche une fenêtre d'information avec le nom de la plage au clic.

Notez que l'écouteur d'événement pour l'événement click utilise une fermeture pour préserver les valeurs du marqueur et de l'index du tableau lors de l'exécution de la fonction de rappel.

En suivant ces étapes, vous pouvez facilement ajouter plusieurs marqueurs avec des infoWindows personnalisées à votre propre Google Maps visualisations.

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!

Array for using Event map JS function this display zoom
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：Comment l’ordre de chargement et d’exécution des scripts JavaScript affecte-t-il les performances des pages Web ?Article suivant：Comment l’ordre de chargement et d’exécution des scripts JavaScript affecte-t-il les performances des pages Web ?

Articles Liés

Voir plus