JSFiddle - React, Tailwind, and code Playground
by paulalexandru21
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="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
var myMapOptions = {
zoom: 15
,center: secheltLoc
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
optimized: false,
position: new google.maps.LatLng(49.47216, -123.76307),
zIndex: 3
});
var marker2 = new google.maps.Marker({
map: theMap,
optimized: false,
icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
position: new google.maps.LatLng(49.47216, -123.760033),
zIndex: 1
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; background: white; height: 70px";
boxText.innerHTML = "";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-18, -49)
,zIndex: 2
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: ""
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "overlayImage"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
...