JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="locations" class="grid_12">

		<div>
			<h2>Home Address</h2>
			<p>Phone: 407-555-5555<br><br>
				Email us: <a href="#">[email protected]</a></p>
				<p class="static_map">
					<img src="http://maps.googleapis.com/maps/api/staticmap?&size=400x300&sensor=false&markers=pearse+street+dublin2" alt="5+wintergarder+apartments+pearse+street+dublin2">
				</p>
				<address>
					pearse street<br> dublin 2
				
				</address>
		</div>

				


				<div><address>tolka road finglas dublin</address></div>


				<div><address>smyths parnell street <br>dublin</address></div>
				
				
	</div>

CSS

#map{
    width: 400px;
    height: 300px;
}

JavaScript

$("#locations").prepend('<div id="map"></div>');
				$(".static_map").remove();
				var map;
				var bounds;
				var geocoder;
				var center;
			    function initialize() {
					var mapOptions = {
						center: new google.maps.LatLng(-34.397, 150.644),
						zoom: 11,
						mapTypeId: google.maps.MapTypeId.ROADMAP
					};
					map = new google.maps.Map(document.getElementById("map"),
						mapOptions);
					geocoder = new google.maps.Geocoder();
					bounds = new google.maps.LatLngBounds();

				}


				function addMarkerToMap(location, address){
					var image = "https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png";
					var marker = new google.maps.Marker({map: map, position: location, icon: image});
					bounds.extend(location);
					map.fitBounds(bounds);
					var infoWindow = new google.maps.InfoWindow({ content: address});
					google.maps.event.addListener(marker, "click", function(){                        
						infoWindow.open(map, marker);
					});
				}
                initialize();  				
                $("address").each(function(){
					var $address = $(this);
					geocoder.geocode({address: $address.text()}, function(results, status){
						if(status == google.maps.GeocoderStatus.OK) addMarkerToMap(results[0].geometry.location, $address.html());
					});
				});

                google.maps.event.addDomListener(map, "idle", function(){
					center = map.getCenter();
				});

				$(window).resize(function(){
					map.setCenter(center);
				});