Multiple Google Maps on page with markers

Question

I'm using the following code to display multiple Google Maps on a website, which is working correctly. But I am struggling to add a marker to the LatLng position on each map.

<div id="block-wrp">
<div class="block-item">
<div id="mapCanvas1" class="map-item"> </div>
<span class="city-name">London</span> </div>
<div class="block-item">
<div id="mapCanvas2" class="map-item"> </div>
<span class="city-name">Amsterdam</span> </div>
</div>

<script type="text/javascript">
var map1, map2;
function drawMap() {

    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }
    mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
    map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

    mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
    map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);
 }

Answer 1

For each marker just add the proper map object value in map property

function drawMap() {

    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }
    mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
    map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

    mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
    map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


    marker1Pos =   new google.maps.LatLng(51.509865, -0.118092);
    var marker1 = new google.maps.Marker({
    position: marker1Pos,
    map: map1,
    title: "Hello World! I'm in map1"
  });

    marker2Pos =  new google.maps.LatLng(52.370216, 4.895168);
    var marker2 = new google.maps.Marker({
    position: marker2Pos,
    map: map2,
    title: "Hello World! I'm in map2"
  });
 }

code snippet:

function drawMap() {

  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    fullscreenControl: false
  }
  mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
  map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

  mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
  map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


  marker1Pos = new google.maps.LatLng(51.509865, -0.118092);
  var marker1 = new google.maps.Marker({
    position: marker1Pos,
    map: map1,
    title: "Hello World! I'm in map1"
  });

  marker2Pos = new google.maps.LatLng(52.370216, 4.895168);
  var marker2 = new google.maps.Marker({
    position: marker2Pos,
    map: map2,
    title: "Hello World! I'm in map2"
  });
}

.map {
  height: 300px;
  width: 400px;
  border: solid black 1px;
}

<div id="mapCanvas1" class="map"></div>
<div id="mapCanvas2" class="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=drawMap" async defer></script>