How to add Google maps to a website using Javascript:
Current Location: Home->Tutorials->Javascript->Google MapsProgramatical points with refresh:
User Defined points:
<script type="text/javascript">
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
boby1 = new variable(0);
boby2 = new variable(0);
boby3 = new variable(1);
var cmarkers = [];
var hmarkers = [];
function variable(x)
{
this.x=x;
}
function loadmap()
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
boby3.x=boby3.x+0.0001;
map.setCenter(new GLatLng((48.2316+boby3.x),(4.446035+boby3.x)), 15);
GEvent.addListener(map,"clickhehe",function cheese(marker, platform_id, point,strhtml)
{
if (marker&&boby1.x==1) {map.removeOverlay(marker); }
else if(boby1.x==1)
{
boby2.x++;
var lnvarime = boby2.x
var lnstoptop=false;
while(lnvarime>0)
{
var jill=eval("document.getElementById('ted"+lnvarime+"')");
if(jill.value==platform_id)
{
lnstoptop=true;
}
lnvarime--;
}
if(lnstoptop==true){
var ted=document.createElement("<input type='button'/>");
ted.id = 'ted'+boby2.x;
document.getElementById('right').appendChild(ted);
ted.value = platform_id //"marker"+boby2.x;
ted.style.width="100%";
var lasy=document.createElement("textarea");
lasy.id = 'lasy'+boby2.x;
document.getElementById('right').appendChild(lasy);
lasy.value=strhtml
lasy.style.height=0+"px";
ted.onmouseover=function() {this.style.backgroundColor='#000'; this.style.color='#fff'; map.removeOverlay(cmarkers[this.id.substr(3,2)]); map.addOverlay(hmarkers[this.id.substr(3,2)]); }
ted.onmouseout=function() {this.style.backgroundColor=''; this.style.color=''; map.removeOverlay(hmarkers[this.id.substr(3,2)]); map.addOverlay(cmarkers[this.id.substr(3,2)]); }}
map.addOverlay(createMarker(point,boby2.x,strhtml));
}
});
boby1.x=1;
cheese(0, 'NAV-TRAX (002)', new GLatLng((48.2316+boby3.x),(4.446035+boby3.x)),"<p>Platform ID: 002<br/>Lat: 048 13.8960<br/>Lon: 004 26.7621</p>");
boby1.x=0;
setTimeout("loadmap();",100);
}
function testme()
{
clickhehe();
}
function refreshPlots()
{
boby3.x=boby3.x+0.000001;
addplots(0, 'CLARION (008)', new GLatLng((48.2098166666667+boby3.x),(4.494525+boby3.x)),"<p>Platform ID: 008<br/>Lat: 048 12.5890<br/>Lon: 004 29.6715</p>");
addplots(0, 'RHUM (007)', new GLatLng((48.25915+boby3.x),(4.47985333333333+boby3.x)),"<p>Platform ID: 007<br/>Lat: 048 15.5490<br/>Lon: 004 28.7912</p>");
addplots(0, 'MISTY (006)', new GLatLng((48.24045+boby3.x),(4.52039333333333+boby3.x)),"<p>Platform ID: 006<br/>Lat: 048 14.4270<br/>Lon: 004 31.2236</p>");
addplots(0, 'MIGHTY MAX (005)', new GLatLng((48.2124166666667+boby3.x),(4.50681333333333+boby3.x)),"<p>Platform ID: 005<br/>Lat: 048 12.7450<br/>Lon: 004 30.4088</p>");
addplots(0, 'LADY EMMA (004)', new GLatLng((48.2350333333333+boby3.x),(4.37526166666667+boby3.x)),"<p>Platform ID: 004<br/>Lat: 048 14.1020<br/>Lon: 004 22.5157</p>");
addplots(0, 'RACE-TRAX (003)', new GLatLng((48.2463833333333+boby3.x),(4.551765+boby3.x)),"<p>Platform ID: 003<br/>Lat: 048 14.7830<br/>Lon: 004 33.1059</p>");
addplots(0, 'NAV-TRAX (002)', new GLatLng((48.2316+boby3.x),(4.446035+boby3.x)),"<p>Platform ID: 002<br/>Lat: 048 13.8960<br/>Lon: 004 26.7621</p>");
addplots(0, 'EIRETECH (001)', new GLatLng((48.2081833333333+boby3.x),(4.45841333333333+boby3.x)),"<p>Platform ID: 001<br/>Lat: 048 12.4910<br/>Lon: 004 27.5048</p>");
//setTimeout("refreshPlots",10000);
}
function addplots(marker, platform_id, point,strhtml)
{
boby2.x++;
var ted=document.createElement("<input type='button'/>");
ted.id = 'ted'+boby2.x;
document.getElementById('right').appendChild(ted);
ted.value = platform_id //"marker"+boby2.x;
ted.style.width="100%";
var lasy=document.createElement("textarea");
lasy.id = 'lasy'+boby2.x;
document.getElementById('right').appendChild(lasy);
lasy.value=strhtml
lasy.style.height=0+"px";
ted.onmouseover=function() {this.style.backgroundColor='#000'; this.style.color='#fff'; map.removeOverlay(cmarkers[this.id.substr(3,2)]); map.addOverlay(hmarkers[this.id.substr(3,2)]); }
ted.onmouseout=function() {this.style.backgroundColor=''; this.style.color=''; map.removeOverlay(hmarkers[this.id.substr(3,2)]); map.addOverlay(cmarkers[this.id.substr(3,2)]); }
map.addOverlay(createMarker(point,boby2.x,strhtml));
}
function createMarker(point,number,htmlcode)
{
var jill=eval("document.getElementById('ted"+boby2.x+"')");
var jogy=eval("document.getElementById('lasy"+boby2.x+"')");
var hotIcon = new GIcon();
hotIcon.image = "marker.png";
hotIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
hotIcon.iconSize = new GSize(20, 34);
hotIcon.shadowSize = new GSize(37, 34);
hotIcon.iconAnchor = new GPoint(9, 34);
hotIcon.infoWindowAnchor = new GPoint(9, 2);
hotIcon.infoShadowAnchor = new GPoint(18, 25);
var coldIcon = new GIcon(hotIcon);
coldIcon.image = "coldmarker.png";
var marker = new GMarker(point,coldIcon);
jill.onclick = function() {if(boby1.x==0){killcol(); jogy.style.height=150+"px"; marker.openInfoWindowHtml(htmlcode);}};
GEvent.addListener(marker, "click", function() {if(boby1.x==0){marker.openInfoWindowHtml(htmlcode); killcol(); jill.style.backgroundColor='#000'; jill.style.color='#fff'; jogy.style.height=150+"px"; }});
cmarkers[boby2.x] = marker;
hmarkers[boby2.x] = new GMarker(point,hotIcon);
return marker;
}
function killcol()
{
for(i=1;i<=boby2.x;i++)
{
var lucy=eval("document.getElementById('ted"+i+"')");
lucy.style.backgroundColor='';
lucy.style.color='';
var jogy=eval("document.getElementById('lasy"+i+"')");
jogy.style.height=0+"px";
}
}
function switchmarker(onoff)
{
if(onoff=='on')
{
boby1.x=1
}
else
{
boby1.x=0
}
}
<body onload="load();loadmap();" onunload="GUnload()">
<div id="map" style="height:600px; width:80%; float:left; "></div>
<div id="right" style="float:right; width:15%; ">
<input type="button" onclick="switchmarker('on');" value="markers on " />
<input type="button" onclick="switchmarker('off');" value="markers off " />
</div>
<div id="end" style="width:100%; "></div>
<input type="button" onclick="testme();" value="testme" />
</body>