JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://gist.github.com/jinthagerman/68a05aed074e0677834a.js"></script>
<script type="text/javascript">
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307),
markers,
myMapOptions = {
zoom: 13,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
marker = new google.maps.Marker({
map: map,
draggable: true,
position: markerData[i].latLng,
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
...