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 ?-js tutoriel-php.cn

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

Libérer： 2024-12-18 17:00:11

original

148 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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!