Ujjwal's Blog: Google Maps API used to map multiple locations.

Friday, March 26, 2010

Google Maps API used to map multiple locations.

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

Friday, March 26, 2010

Google Maps API used to map multiple locations.

No comments: