JSFiddle - React, Tailwind, and code Playground

by erzzo

HTML

<script src="//maps.google.com/maps/api/js?sensor=true&amp;libraries=drawing"></script>
<section id="floating-div" class="map-widget map-widget-sidebar">
    <ul>
        <li class="zoom" data-val='1'>zoom to polygon 1</li>
        <li class="zoom" data-val='2'>zoom to polygon 2</li>
        <li class="zoom"><b>zoom out</b></li>
    </ul>
</section>

<div id="map"></div>

CSS

#floating-div {
    background-color: white;
    display: block;
    position: absolute;
    z-index: 100000;
    margin: 10px auto 0 10px;
    height: 100%;
    width: 250px;
	border-radius: 3px;
    opacity: 0.9; //only to show hidden polygon
}

#map {
    width: 800px;
    height: 500px;
}

.zoom:hover {
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

var triangle1Coords = [
      {lat: -33.763165380097, lng:149.20532226562},
      {lat: -34.005996642518, lng:149.2204284668},
      {lat: -33.908035299893,lng:149.59945678711},
      {lat: -33.71634395006, lng:149.52117919922},
      {lat: -33.763165380097, lng:149.20532226562}
  ];
    
  var triangle2Coords = [
      {lat: -33.930827071343, lng: 150.48110961914},
     {lat: -34.107256396631, lng:150.40626525879},
     {lat: -34.110099024623, lng:150.56900024414},
     {lat: -33.908035299893, lng:150.67543029785},
     {lat: -33.930827071343, lng:150.48110961914}
  ];

    var mergedPolygons = $.merge([], triangle1Coords);  
    $.merge(mergedPolygons, triangle2Coords);  

  var mapOptions = {
    zoom: 4,
    mapTypeControl: true,
    mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.VERTICAL_BAR,
		position: google.maps.ControlPosition.TOP_RIGHT
    },
	panControl: false,
	zoomControl: true,
    zoomControlOptions: {
		style: google.maps.ZoomControlStyle.LARGE,
		position: google.maps.ControlPosition.RIGHT_TOP
    },
	scaleControl: false,
	streetViewControl: true,
    streetViewControlOptions: {
		position: google.maps.ControlPosition.RIGHT_TOP
    }
  }
  
var map = null;

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  this.map = map;

  new google.maps.Polygon({
    paths: triangle1Coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
    
 new google.maps.Polygon({
    paths: triangle2Coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
    
    // fire up the first time after google map was loaded
    google.maps.event.addListenerOnce(this.map, "projection_changed", function(){
		zoomToBounds(mergedPolygons);
    });
}

initialize();

//zoom to given polygon
function zoomToBounds(polygon){
   ...