Wie zeige ich mehrere Markierungen mit InfoWindows mithilfe der Google Maps JS API v3 an?

Google Maps JS API v3 – Einfaches Beispiel für mehrere Markierungen

Eine Karte und Markierungen erstellen

Erstellen Sie zunächst eine Erstellen Sie eine neue HTML-Datei und fügen Sie das Google Maps API-Skript in Ihren API-Schlüssel ein. Als nächstes richten Sie das Kartenobjekt ein und versehen es mit den notwendigen Parametern:

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
});

Erstellen eines InfoWindow

Definieren Sie ein InfoWindow-Objekt, auf dem der Standortname angezeigt wird Markierungsklick:

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

Looping Through Location Daten

Als nächstes durchlaufen Sie Ihr Datenarray, erstellen eine Markierung für jeden Standort und fügen ihn der Karte hinzu:

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
  });

Klickereignisse für InfoWindows festlegen

Fügen Sie abschließend einen Ereignis-Listener zu jeder Markierung hinzu, der das Öffnen des InfoWindow auslöst angeklickt:

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

Vollständiger Code

Der vollständige Code sieht so aus:

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));
}

Das obige ist der detaillierte Inhalt vonWie zeige ich mehrere Markierungen mit InfoWindows mithilfe der Google Maps JS API v3 an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!