JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div class="click">
    <div class="point">******click here******</div>
  <div class="hide">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>

<div class="click">
    <div class="point">******click here******</div>
  <div class="hide">
    <div id="map1" style="width:300px;height:140px;"></div>
  </div> 
</div>

<div class="click">
    <div class="point">******click here******</div>
  <div class="hide">
    <div id="map2" style="width:300px;height:140px;"></div> 
  </div> 
</div>

CSS

body{
    margin:20px;
   
}
.click{
    margin:20px;
    cursor:pointer;
    padding:20px;
    width:300px;
    background:orange;
}
.hide{
    height:140px;
}

JavaScript

$('.hide').hide();

$('.point').click(function(){
    var $this = $(this);
    $this.next('.hide').slideToggle(function initialize(){
        var mapID = $(this).children().first().attr("id");
        console.log(mapID);
        if(mapID == "map"){
            var latlng = new google.maps.LatLng(48.89376,2.33742); //1 location
        }else if(mapID == "map2"){
            var latlng = new google.maps.LatLng(40.73717,-73.98439); //2 location
        }else{
            var latlng = new google.maps.LatLng(-8.79069, 115.15927); //3 location
        }
         
	    var settings = {
	    	zoom: 15,
	        center: latlng,
	        disableDefaultUI: true,
            zoomControl: true,
        	mapTypeId: google.maps.MapTypeId.ROADMAP
		};
    
		var map = new google.maps.Map(document.getElementById(mapID), settings);
    
        var marker=new google.maps.Marker({
	          position:latlng,
	          });
		 marker.setMap(map);
    });
})


google.maps.event.addDomListener(window, 'load', initialize);