JSFiddle - React, Tailwind, and code Playground

by cdeutsch

HTML

<html>
    <head>
<script src="http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js"></script> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1");</script> 
<script type="text/javascript"> 
google.load("maps", "3", {other_params:"sensor=false"});
</script> 
<script src="http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/smartinfowindow.js"></script> 
</head>
<body>
<div id="map_canvas" style="width:500px; height:600px;"></div>
</body>
</html>

JavaScript

locations = [
    {
        "full_location": "St. Paul Hotel 1",
        "lat": "44.94483",
        "lng": "-93.09590"
    },
    {
        "full_location": "St. Paul Hotel 2",
        "lat": "44.94483",
        "lng": "-93.09590"
    },
    {
        "full_location": "St. Paul Hotel 3",
        "lat": "44.94483",
        "lng": "-93.09590"
    }];

var map, cloud;
var counter = 0;
var markers = [];

$(document).ready(function() {
google.load("maps", "3", {other_params:"sensor=false"});    
    
    var options = {
        zoom: 2,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), options);
    for (var i = 0; i < 3; i++) {
        makeMarker(locations[i]);
    }
    
    centerMap();
});

function centerMap() {
  map.setCenter(markers[markers.length-1].getPosition());
}


function makeMarker(location) {
  var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
  var marker = new google.maps.Marker(markerOptions);
  markers.push(marker);
  var content = '<div style="text-align: center; font-size:14px;"><center><b>Diamantino, Brazil</b></center><img width="240" height="180" src="http://mw2.google.com/mw-panoramio/photos/small/7253919.jpg"/><div style="margin: auto; text-align: right; width: 240px;" class="linkbutton"><a href="http://www.panoramio.com/user/279908">Edson Walter Cavalari</a></div><div class="linkbutton"><a href="http://www.panoramio.com/photo/7253919" target="_blank">See more photos at Panoramio.com</a></div><br/><div class="linkbutton"><a href="http://www.google.com/search?q=site:wikipedia.org+Diamantino,Brazil&amp;btnI=I\'m+Feeling+Lucky" target="_blank">Read more about this location</a></div><div class="linkbutton"><a href="javascript:void(0)" id="zoomLink">Zoom in to this location</a></div></div>';

  google.maps.event.addListener(marker, 'click', function(e) {
     ...