Demo here.

Code here:

{code type=codetype}

<?php
$MAP_KEY = “ABQIAAAAKUoMrGt2-F8In78jgweaQBQM-lj3X4YEvxvNB7SBD1m4DXy0jRT7k0fhlF6QCCN2gLTv_NB2YasFwQ”;
?>
<html>
<head>
<title>My Google Map Page marker</title>
<script src=”http://maps.google.com/maps?file=api&key=<?php echo $MAP_KEY; ?>” type=”text/javascript”></script>
</head>
<body onLoad=”load();”>
<div id=”map” style=”width: 450px; height: 450px;”></div>
<script type=”text/javascript”>//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(77.5964355468750000,12.9617358435343140);
var marker = new GMarker(point);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 12);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml("<table width='215'><tr><td><a target='_blank' href='http://www.moonreturn.com/'>jay bharat</a></td></tr><tr><td><img src='http://img704.imageshack.us/img704/4409/21248016435.jpg' border='0' width='64px' height='96' /></td></tr><tr><td>20 cross, InfantryRoad<br />Bangalore ,India<br />9844542127</td></tr></table><br /><a target='_blank' href='http://maps.google.com/maps?q=14 cross, InfantryRoad,Bangalore'>Directions</a>");
});
map.addOverlay(marker);
<?php
$strtMarker=1;
for($i=13;$i<17;$i++)
{
?>

var point = new GPoint(77.5964355468750000,<?php echo $i ?>.9617358435343240);
var marker<?php echo $strtMarker;?> = new GMarker(point);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 12);
GEvent.addListener(marker<?php echo $strtMarker;?>, "mouseover", function() {
marker<?php echo $strtMarker;?>.openInfoWindowHtml("<table width='215'><tr><td><a target='_blank' href='http://www.moonreturn.com/'>jay bharat</a></td></tr><tr><td><img src='http://img341.imageshack.us/img341/1975/21248016266.jpg' border='0' width='64px' height='96' /></td></tr><tr><td>20 cross, InfantryRoad<br />Bangalore ,India<br />9844542127</td></tr></table><br /><a target='_blank' href='http://maps.google.com/maps?q=14 cross, InfantryRoad,Bangalore'>Directions</a>");
});
map.addOverlay(marker<?php echo $strtMarker;?>);
<?php
$strtMarker+=1;
}
?>

}
//]]>
</script>
</body>
</html>

 

Share on Facebook