JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<div id="map1">
</div>


<div id="map2"></div>

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


</script>

CSS

#map1,
#map2 {
  width: 450px;
  height: 400px;
}

JavaScript

var map1, map2;
var listener1;
var listener2;

function initMap() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(33.8120918, -117.9211629),
    mapTypeId: 'terrain'
  };
  var mapOptions2 = {
    zoom: 15,
    center: new google.maps.LatLng(33.8120918, -117.9211629),
    mapTypeId: 'hybrid'
  };

  map1 = new google.maps.Map(document.getElementById('map1'), mapOptions);
  map2 = new google.maps.Map(document.getElementById('map2'), mapOptions2);


  map1.addListener('mouseover', function() {
    google.maps.event.removeListener(listener2);
    listener1 = google.maps.event.addListener(map1, 'bounds_changed', (function() {
      map2.setCenter(map1.getCenter());
      map2.setZoom(map1.getZoom());
    }));
  });


  map2.addListener('mouseover', function() {
    google.maps.event.removeListener(listener1);
    listener2 = google.maps.event.addListener(map2, 'bounds_changed', (function() {
      map1.setCenter(map2.getCenter());
      map1.setZoom(map2.getZoom());
    }));
  });


}