JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6YAqeEFMu0ohvdr8h2Z6jhJW17pQSeII&amp;sensor=false"></script>
<a href="#" class="button" data-latLng="53#separator#-1.33#separator#Address 1">Button 1</a>
<a href="#" class="button" data-latLng="-34.397#separator#150.644#separator#Address 2">Button 2</a>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas  {
	  	margin: 0;
	  	padding: 0;
	  	height: 100%;
	}

	#map-canvas {
	  	width:500px;
	  	height:480px;
	}

JavaScript

$(document).ready(function() {
	    $(document).on("click", ".button", function(e) {
	        e.preventDefault();
	        var latLng = $(this).attr("data-latLng");			
	        initialize(latLng);

		    function initialize(latLng) {
		    	console.log(latLng);
		    	latLng = latLng.split("#separator#");
		    	address = latLng[2];
		    	console.log(address);
		    	var map;        
				var myCenter=new google.maps.LatLng(latLng[0],latLng[1]);
				var marker=new google.maps.Marker({
				    position:myCenter
				});


		    
			  	var mapProp = {
			      	center: myCenter,
			      	zoom: 14,
			      	mapTypeId:google.maps.MapTypeId.ROADMAP
			  	};


			  
			  	map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
			  	marker.setMap(map);
          

			    var contentString ="Your Content String";
			  	google.maps.event.addListener(marker, 'click', function() {
			      var infowindow = new google.maps.InfoWindow();
			    	infowindow.setContent(contentString);
			    	infowindow.open(map, marker);
			    
			  	}); 
			};
			google.maps.event.addDomListener(window, 'load', initialize);

			google.maps.event.addDomListener(window, "resize", resizingMap());


			$(document).on("click", "#myMapModal", function(event){
			  	alert('tes')
			   	//Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)
			    htmlData = ' <div id="map-canvas" class=""></div>';
			    $('#content').html(htmlData);
			   	resizeMap();
			})

			function resizeMap() {
			   	if(typeof map =="undefined") return;
			   	setTimeout( function(){resizingMap();} , 400);
			}

			function resizingMap() {
			   	if(typeof map =="undefined") return;
			   	var center = map.getCenter();
			   	google.maps.event.trigger(map, "resize");
			   	map.setCenter(center); 
			}
		});

	});