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>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></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 = [];

var infoboxes = [];

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 = "<div style=\"background:#AAA;\"><h5> Name:" + imgAr[i].name + "<br> Description:" + imgAr[i].description + 
                             "<br><img src='"+ imgAr[i].image +"' width='100px' height='100px'/> <h5></div>" ;

        
        
        
    var infobox = new InfoBox({
         content: content,
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, 0),
         zIndex: null,
         boxStyle: {
           ...