Mutiple Google Maps auf einer einzigen Seite

Question

Ich versuche, mehrere Google Maps auf einer einzigen Seite anzuzeigen. Die genaue Anzahl der Karteninstanzen kann je Seite variieren. Ich fand diesen Code in einer Antwort auf eine andere Frage, die genau das, was scheint, ich brauche:

function mapAddress(mapElement, address) { 
var geocoder = new google.maps.Geocoder(); 

geocoder.geocode({ 'address': address }, function (results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var mapOptions = { 
      zoom: 14, 
      center: results[0].geometry.location, 
      disableDefaultUI: true 
     }; 
     var map = new google.maps.Map(document.getElementById(mapElement), mapOptions); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
}); 
} 

Quelle: https://stackoverflow.com/a/22328509/2740023

Ich bin unsicher, wie ich mit den richtigen Variablen diesen Code bearbeiten würde, um es Arbeit. Ich habe Zugriff auf Lat und Long-Variablen sowie eine Adresse im Text-String-Format. Wo genau stelle ich diese in den obigen Code ein?

Answer 1

Der von Ihnen gepostete Beispielcode sieht so aus, als hätte er einen Code, um eine Adresse zu geocodieren. Wenn Sie 2 Karten anzeigen möchten, müssen Sie zwei Kartenobjekte erstellen und diese in ein eigenes div einfügen. Bitte beachten Sie Beispielcode:

HTML

<div id="map"></div> 
<div id="map2"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script> 

CSS

#map { 
    height: 100%; 
} 
#map2 { 
    height: 100%; 
} 

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

JavaScript

var map; 
var map2; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 8 
}); 
map2 = new google.maps.Map(document.getElementById('map2'), { 
    center: {lat: 30.2672, lng: -97.7431}, 
    zoom: 8 
}); 
} 

Ich habe eine Probe davon auf einem JSFiddle hier:

https://jsfiddle.net/eb5owrdc/1/

Bitte beachten Sie, dass Sie Ihren eigenen API-Schlüssel eingeben müssen, damit das Beispiel funktioniert.

Ich hoffe, das hilft!