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