Hi,
I was recently working on a project where i need to fetch multiple locations used google maps API. I searched a lot and tried many examples but was'nt able to find any appropriate, finally i gone through the documentation of google maps API. I found the solution
Below is the list where i stored all my addresses
var addresses =new Array();
addresses[] = '';
Here's my onload function
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(10, -180), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
geocoder = new GClientGeocoder();
GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
//document.getElementById("show_x").innerHTML = point.x;
// document.getElementById("show_y").innerHTML = point.y;
}
});
GEvent.addListener(map, 'zoomend',
function(oldZoomLevel, newZoomLevel) {
//document.getElementById("zoom_old").innerHTML = oldZoomLevel;
//document.getElementById("zoom_new").innerHTML = newZoomLevel;
});
}
showAddress();
}
Here's my show address function
function showAddress() {
//alert("address : " + addresses);
convertToLatLng();
}
Here's my convertToLatLng, this function is the core function i used for
var points = [];
function convertToLatLng() {
if (points.length >= addresses.length) {
showPoints();
} else {
geocode(addresses[points.length]);
}
}
My geocode function
function geocode(address) {
//alert(address);
geocoder.getLatLng(
address,
function(point) {
if(!point)
{
}
else
{
points.push(point);
window.setTimeout(convertToLatLng, 300);
map.setCenter(point, 13);
//var marker = new GMarker(point);
var letters=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P", "Q","R","S","T","U","V","W","X","Y","Z"];
var marker=createMarker(point, letters[points.length-1]);
map.addOverlay(marker);
//marker.openInfoWindowHtml(address + "
Long: " + point.x + "
Lati: " + point.y);
//document.getElementById("show_x").innerHTML = point.x;
//document.getElementById("show_y").innerHTML = point.y;
//document.getElementById("zoom_new").innerHTML = 14;
}
}
);
}
My show points function, this function displays points for each location fetched from the database
function showPoints() {
for (i in points) {
var lat_lng = points[i];
if (lat_lng) {
var marker=createMarker(points[i], letters[i]);
map.addOverlay(marker);
//map.addOverlay(new GMarker(lat_lng));
}
}
}
I tweaked a bit and created alphabetical markers for the map as below
function createMarker(point, letter) {
// use a custom icon with letter A - Z
var letter = letter;
var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png");
myIcon.printImage = "http://maps.google.com/mapfiles/marker"+letter+"ie.gif";
myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+letter+"ff.gif";
var CallSign = CallSign;
var marker = new GMarker(point, {icon:myIcon});
//GEvent.addListener(marker, "click", function()
//{
//
//// save the info we need to use later for the side_bar
//gmarkers.push(marker)
//// add a line to the side_bar html
//
//
//
//});
return marker;
}
This is how i did to display multiple locations on the map.
Cheers!!!
Ujjwal