JSFiddle - React, Tailwind, and code Playground

by Kyle Lam

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
    <div id="map-canvas"></div>

CSS

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

JavaScript

imgAr=[
    {name:"San Francisco",description:"This is San Francisco, SF",image:"http://www.sanfrancisco.travel/sites/sftraveldev.prod.acquia-sites.com/files/SanFrancisco_0.jpg",coords:{coordinates:[37.7833,-122.4167]}},
    {name:"San Jose",description:"This is San Jose",image:"http://www.sanjoseca.gov/images/pages/N9/Visitors%20Main%20Page.jpg",coords:{coordinates:[37.3382,-121.8863]}},
    {name:"Mountain View",description:"This is MTV",image:"http://upload.wikimedia.org/wikipedia/commons/8/84/2008_05_01_8.jpg",coords:{coordinates:[37.3894,-122.0819]}},
    {name:"SFO",description:"Welcome to SFO",image:"http://www.jaunted.com/files/6193/SFOprev2.jpg",coords:{coordinates:[37.6189,-122.3750]}}];

var infowindows = [];


function initialize() {
  var myLatlng = new google.maps.LatLng(37.3894,-122.0819);
  var mapOptions = {
      zoom: 9
			,center: myLatlng
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    for( i = 0; i < imgAr.length; i++) {
        
           var location = new google.maps.LatLng(imgAr[i].coords.coordinates[0], imgAr[i].coords.coordinates[1]);
        
           var marker = new google.maps.Marker({
                        position : location,
                        map : map,
                        animation : google.maps.Animation.DROP,
                        infoboxIndex : i //<---Thats the extra attribute
            });
        
           var content = "<h5> Name:" + imgAr[i].name + "<br> Description:" + imgAr[i].description + 
                             "<br><img src='"+ imgAr[i].image +"' width='100px' height='100px'/> <h5>" ;

        
         var infowindow = new google.maps.InfoWindow({
                  content: content
            })
         
            infowindows.push(infowindow);
  
        
            google.maps.event.addListener(marker, 'mouseover',
                    function(event) {
                               ...