Two Google Maps on same page with markers

Question

I have two maps that I am trying to show on one page, one for element id= mapall, the other for id=mapall2.

Both have multiple markers on them that are provided in arrays (var =markers and var = markers2). At the moment both maps show on the page, but only one of them at a time shows the markers and has the map controls (zoom, full screen). If I refresh the page, then the other map has all of its markers and the other doesn't. How do I get both maps to load simultaneously?

First Map:

<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

second map:

<script>
<?php
echo "var markers2=$markers2;\n";
?>
function initMap2() {
var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall2'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers2.length; i++ ) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap">
 </script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap2">
 </script>

and this is what they currently look like (the map on the right should also have markers, provided by markers2:

Answer 1

You are including the API twice. That generates the warning:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors

Only include the API one time, put the initialization code for both maps inside a single initialization function.

One option:

<script>
function initialize() {
  initMap();
  initMap2();
}
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

proof of concept fiddle

code snippet:

var markers = [{
  GPS1: -34.031342,
  GPS2: 18.577419,
  client_address: "somewhere1"
}];

function initialize() {
  initMap();
  initMap2();
}

function initMap() {
  var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers.length; i++) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}
var markers2 = [{
  GPS1: -33.92465,
  GPS2: 18.84382,
  client_address: "somewhere2"
}];

function initMap2() {
  var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall2'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers2.length; i++) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}

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

#mapall,
#mapall2 {
  height: 50%;
  width: 100%;
  border: red solid 1px;
}

<div id="mapall"></div>
<div id="mapall2"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize">
</script>