JSFiddle - React, Tailwind, and code Playground

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', 16, 'ventura');return false;">Wet'n Wild</a> |
<a href="#" onclick="resetMap('20.8717326', '-87.0732266', 16, 'selvatica');return false;">Selvatica</a> |
<a href="#" onclick="resetMap('20.865145', '-86.820306', 9, 'dolphinaris');return false;">Dolphinaris</a> |
<a href="#" onclick="resetMap('20.7244053', '-103.309896', 16, 'selva');return false;">Selva Mágica</a> |
<a href="#" onclick="resetMap('19.4161028', '-99.1956264', 16, 'feria');return false;">La Feria</a>

CSS

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

JavaScript

var map;
var bounds;
var markers = [];


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

    map.setCenter(newPos);
     map.setZoom(zoom);
        
   markers.forEach(function(marker) {
       
  
    if(marker.get('name') == name)
       {
           console.log('match');
       marker.setVisible(true);
       }
       else
       {
      marker.setVisible(false);
}

});
    
   
}

jQuery(document).ready(function($){
    bounds = new google.maps.LatLngBounds();
	//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": [ { "visibility": "on" }, { "color": "#e5edf0" } ] },{ "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#9fd2ff" } ] },{...