Google Map with multiple Markers used to locate different locations .
We can show a map with image and contact details like following
Example for Placing multiple markers with image on a Google Map
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="text/javascript"></script>
<style type="text/css">
#map{
height: 150%;
width: 100%;
}
</style>
<script type="text/javascript">
var map;
var geocoder;
var xml;
var markers;
var mapopt;
var address;
var markeraddress;
var k=0;
// On page load, call this function
function load()
{
// Create new map object
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl3D());
// Create new geocoding object
geocoder = new GClientGeocoder();
var latlonarr=new Array();
var arselected = new Array();
var length1=0;
var loopcount=0;
var sw=0;
arselected[0]="Bhoopalpally Phase -II,Hanamkonda,Warangal";
arselected[1]="Gopalan arcade.4th flore,1st Main,Kasturi Nagar,Bangalore,KA";
arselected[2]="Sri Mobiles,No 2,24th Main,JP Nagar 1st Phase,Bangalore,KA";
arselected[3]="#33,RK Mutt Road,Ulsoor,Bangalore 560008,KA";
arselected[4]="Minnu Tour & Travels No 74,Nagavarapalya,CV Raman Nagar,Bangalore,KA";
arselected[5]="Fazal Technologies,No 89,Fazal Manor,Richmond Road,Bangalore,KA";
arselected[6]="Neon Electronics,No 335/,Gokul Complex,Sampige Road,Malleshwaram,Bangalore,KA";
arselected[7]="Canadian International School Survey No.420,Yelahanka,Bangalore,KA";
arselected[8]="485,6th 'D' Cross,Koramangala 6th Block,Bangalore,KA";
arselected[9]="Salarpuria Infinity, 3rd Floor #5,Bannerghatta Road ,Bangalore-560029,KA";
arselected[10]="BMTC,central offices,K.H.Road,Shanthi nagar,Bangalore-560027";
arselected[11]="57-A, 21st K M, Hosur Road, Bommasandra Industrial Area,Bangalore,KA";
arselected[12]="63/8.Maruthi Layout,Near Rajaram Factory,2nd Phase,Peenya Industrial Area,Bangalore,KA";
arselected[13]="Plot 1&2, KIADB Industrial area, Attibele,Bangalore,KA";
arselected[14]="Apt 203, Scion Enclave, Govindappa Lane, Off 80 ft rd,Indira nagar,Bangalore,KA";
var address=new Array();
var exact_address=new Array();
var exact=new Array();
var j;
var count=0;
var marker=new Array();
var exact_add=new Array();
var xmlfl="<markers>";
var s=0;
var km=0;
var url="'http://www.google.com','google','width=400,height=400'";
for (var i = 0; i < arselected.length; i++)
{
address[i]= arselected[i];
var len=address[i].split(',').length;
exact=address[i].split(',');
for(var k=0;k<3;k++)
{
exact_add[k]=exact[parseInt(len)-(parseInt(k)+1)];
}
exact_add.reverse();
exact_address[i]=exact_add;
s=i+1;
xmlfl+="<marker address=\""+exact_address[i]+"\">";
xmlfl+="<AlphaCharacter>"+s+"</AlphaCharacter></marker>";
}
xmlfl+="</markers>";
document.getElementById("sample").innerHTML="";
document.getElementById("sample").innerHTML=xmlfl;
markers =document.getElementById("sample").getElementsByTagName("marker");
for (var i = 0; i < exact_address.length; i++)
{
markeraddress = markers[i].getAttribute("address");
geocoder.getLocations(markeraddress,addToMap);
document.getElementById("loop").value=i;
}
function addToMap(response)
{
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
latlonarr[km]=point;
km++;
sendpoint(point);
}
function sendpoint(point)
{
var numberedIcon = new GIcon(G_DEFAULT_ICON)
var ar=address[loopcount];
map.setCenter(point, 13);
numberedIcon.image = "http://www.geocodezip.com/mapIcons/marker.png"
var k=document.getElementById("loop").value;
markerOptions = { icon:numberedIcon, clickable:true,title:ar,position:loopcount}
mapopt= { icon:numberedIcon, clickable:true,title:ar,position:loopcount};
marker= new GMarker(point,mapopt);
map.addOverlay(marker);
loopcount++;
}
GEvent.addListener(map,"click",function(marker,markerOptions,ar)
{
var html="";
var ra="";
var sowji=0;
for(var siri=0;siri<15;siri++)
{
if(latlonarr[siri]==ar)
{
sowji=siri;
ra=address[siri-1];
}
}
html=ra+"<br><img src=\"im/css.jpg\" height=\"160px\" width=\"240px\"/>For More Information <a href=javascript:popupwin("+url+")><b>click<b></a>";
marker.openInfoWindowHtml(html,{maxWidth:200},markerOptions);
});
}
function popupwin(url)
{
newwindow=window.open(url);
if (window.focus) {newwindow.focus();}
}
</script>
</head>
<body onLoad="load()">
<input type="hidden" name="loop" id="loop">
<div id="map"></div>
<div id="sample" style="display=none"></div>
<div id=addr123 style="display:block">
1.Kalyan Meher Kotay, 15/15,25th Cross,JayaNagar 6th Main Rd,BANGALORE,KA;<br>
2.Gopalan arcade.4th flore,1st Main,Kasturi Nagar,Bangalore,KA;<br>
</div>
</body>
</html>
We can show a map with image and contact details like following
Example for Placing multiple markers with image on a Google Map
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="text/javascript"></script>
<style type="text/css">
#map{
height: 150%;
width: 100%;
}
</style>
<script type="text/javascript">
var map;
var geocoder;
var xml;
var markers;
var mapopt;
var address;
var markeraddress;
var k=0;
// On page load, call this function
function load()
{
// Create new map object
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl3D());
// Create new geocoding object
geocoder = new GClientGeocoder();
var latlonarr=new Array();
var arselected = new Array();
var length1=0;
var loopcount=0;
var sw=0;
arselected[0]="Bhoopalpally Phase -II,Hanamkonda,Warangal";
arselected[1]="Gopalan arcade.4th flore,1st Main,Kasturi Nagar,Bangalore,KA";
arselected[2]="Sri Mobiles,No 2,24th Main,JP Nagar 1st Phase,Bangalore,KA";
arselected[3]="#33,RK Mutt Road,Ulsoor,Bangalore 560008,KA";
arselected[4]="Minnu Tour & Travels No 74,Nagavarapalya,CV Raman Nagar,Bangalore,KA";
arselected[5]="Fazal Technologies,No 89,Fazal Manor,Richmond Road,Bangalore,KA";
arselected[6]="Neon Electronics,No 335/,Gokul Complex,Sampige Road,Malleshwaram,Bangalore,KA";
arselected[7]="Canadian International School Survey No.420,Yelahanka,Bangalore,KA";
arselected[8]="485,6th 'D' Cross,Koramangala 6th Block,Bangalore,KA";
arselected[9]="Salarpuria Infinity, 3rd Floor #5,Bannerghatta Road ,Bangalore-560029,KA";
arselected[10]="BMTC,central offices,K.H.Road,Shanthi nagar,Bangalore-560027";
arselected[11]="57-A, 21st K M, Hosur Road, Bommasandra Industrial Area,Bangalore,KA";
arselected[12]="63/8.Maruthi Layout,Near Rajaram Factory,2nd Phase,Peenya Industrial Area,Bangalore,KA";
arselected[13]="Plot 1&2, KIADB Industrial area, Attibele,Bangalore,KA";
arselected[14]="Apt 203, Scion Enclave, Govindappa Lane, Off 80 ft rd,Indira nagar,Bangalore,KA";
var address=new Array();
var exact_address=new Array();
var exact=new Array();
var j;
var count=0;
var marker=new Array();
var exact_add=new Array();
var xmlfl="<markers>";
var s=0;
var km=0;
var url="'http://www.google.com','google','width=400,height=400'";
for (var i = 0; i < arselected.length; i++)
{
address[i]= arselected[i];
var len=address[i].split(',').length;
exact=address[i].split(',');
for(var k=0;k<3;k++)
{
exact_add[k]=exact[parseInt(len)-(parseInt(k)+1)];
}
exact_add.reverse();
exact_address[i]=exact_add;
s=i+1;
xmlfl+="<marker address=\""+exact_address[i]+"\">";
xmlfl+="<AlphaCharacter>"+s+"</AlphaCharacter></marker>";
}
xmlfl+="</markers>";
document.getElementById("sample").innerHTML="";
document.getElementById("sample").innerHTML=xmlfl;
markers =document.getElementById("sample").getElementsByTagName("marker");
for (var i = 0; i < exact_address.length; i++)
{
markeraddress = markers[i].getAttribute("address");
geocoder.getLocations(markeraddress,addToMap);
document.getElementById("loop").value=i;
}
function addToMap(response)
{
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
latlonarr[km]=point;
km++;
sendpoint(point);
}
function sendpoint(point)
{
var numberedIcon = new GIcon(G_DEFAULT_ICON)
var ar=address[loopcount];
map.setCenter(point, 13);
numberedIcon.image = "http://www.geocodezip.com/mapIcons/marker.png"
var k=document.getElementById("loop").value;
markerOptions = { icon:numberedIcon, clickable:true,title:ar,position:loopcount}
mapopt= { icon:numberedIcon, clickable:true,title:ar,position:loopcount};
marker= new GMarker(point,mapopt);
map.addOverlay(marker);
loopcount++;
}
GEvent.addListener(map,"click",function(marker,markerOptions,ar)
{
var html="";
var ra="";
var sowji=0;
for(var siri=0;siri<15;siri++)
{
if(latlonarr[siri]==ar)
{
sowji=siri;
ra=address[siri-1];
}
}
html=ra+"<br><img src=\"im/css.jpg\" height=\"160px\" width=\"240px\"/>For More Information <a href=javascript:popupwin("+url+")><b>click<b></a>";
marker.openInfoWindowHtml(html,{maxWidth:200},markerOptions);
});
}
function popupwin(url)
{
newwindow=window.open(url);
if (window.focus) {newwindow.focus();}
}
</script>
</head>
<body onLoad="load()">
<input type="hidden" name="loop" id="loop">
<div id="map"></div>
<div id="sample" style="display=none"></div>
<div id=addr123 style="display:block">
1.Kalyan Meher Kotay, 15/15,25th Cross,JayaNagar 6th Main Rd,BANGALORE,KA;<br>
2.Gopalan arcade.4th flore,1st Main,Kasturi Nagar,Bangalore,KA;<br>
</div>
</body>
</html>
