JSFiddle - React, Tailwind, and code Playground

by Manjula Dhamodharan

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

JavaScript

var locations = [
		['<div class="infobox"><h3 class="title"><a href="#contact">OUR INDIA OFFICE</a></h3><span>No 7, Vigneshwara Street, Ganesh Nagar, Guindy, Chennai-600 032</span><br>+90 555 666 77 88</p></div></div></div>',  12.996868, 80.209891, 2]
		
		];
	
		var map = new google.maps.Map(document.getElementById('map'), {
			
		  zoom: 13,
			scrollwheel: false,
			navigationControl: true,
			mapTypeControl: false,
			scaleControl: false,
			draggable: false,
			styles: [ { "stylers": [ { "hue": "#ff6501" },  {saturation: 20},
                {gamma: 1} ] } ],
			center: new google.maps.LatLng( 12.996868, 80.209891),
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		});
	
		var infowindow = new google.maps.InfoWindow();
	
		var marker, i;
	
		for (i = 0; i < locations.length; i++) {  
	  
			marker = new google.maps.Marker({ 
			position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
			map: map ,
			icon: 'images/marker1.png'
			});
	
	
		  google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
			  infowindow.setContent(locations[i][0]);
			  infowindow.open(map, marker);
			  
			}
		  })(marker, i));
		}