JSFiddle - React, Tailwind, and code Playground

by Yamini Sontakke

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<section id="cd-google-map">
<div id="google-container">&nbsp;</div>
<div id="cd-zoom-in">&nbsp;</div>
<div id="cd-zoom-out">&nbsp;</div>
</section>
<a href="#" onclick="resetMap('21.0241839', '-86.8148164', 20, 'ventura');return false;">Ventura</a>
<a href="#" onclick="resetMap(21.0241819, -86.8151933, 20, 'dolphinaris');return false;">Dolphinaris</a>

CSS

#google-container {
    height: 450px;
    width:100%;
}

JavaScript

var map;
var markers = [];

function setMarkerVisibility(name){
    markers.forEach(function(marker) {     
   console.log(marker.get('name'));
    if(marker.get('name') == name)
       {
           console.log('match');
          // marker.setVisible(true);
      setTimeout(function(){ marker.setVisible(true); }, 300); 
       }
       else
       {
      marker.setVisible(false);
   }
        });
}

function resetMap(lat, lon, zoom, name) {
   
    var newPos = new google.maps.LatLng(lat, lon);

    $.when( map.setZoom(zoom) ).done(function(){
      $.when( map.panTo(newPos)).done(function(){
        setMarkerVisibility(name);
      });
    });
   


    
   
}

jQuery(document).ready(function($){
	//set your google maps parameters
	var latitude = 21.760791,
		longitude = -94.976876,
		map_zoom = 6;

	//google map custom marker icon - .png fallback for IE11
	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var selvatica = 'http://dnk.mx/entertainment/images/template/markers/selvatica.png';

	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var dolphinaris = 'http://dnk.mx/entertainment/images/template/markers/selvatica.png';

	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var ventura = 'http://dnk.mx/entertainment/images/template/markers/selvatica.png';

	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var selva = 'http://dnk.mx/entertainment/images/template/markers/selvatica.png';

	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var feria = 'http://dnk.mx/entertainment/images/template/markers/selvatica.png';
		

	//we define here the style of the map
	var style = [
    { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#61c3ff" }, { "visibility": "on" } ] },{ "featureType": "landscape", "elementType": "geometry.fill", "stylers":...