Google Maps API - showing multiple addresses problem

JavaScript
1

I need a hand with my google maps code…

Basically what I want to do is display multiple addresses on a single map. I’ve got that part to work but I need to set-up the bounds and zoom so it zooms out/in and shows all the addresses in the map window…

My problem is after I run the setMapMarker() function in the load() function, I need to pull out the latitude and longitude from the geocoder that is run in the setMapMarker() function… however I can’t seem to get it to return those details because the coordinates are pulled in the geocoder function…

I hope I’m making sense…

When I use the following code:

    cords = setMapMarker(i, businesses[i].address);
    alert(cords);

It alerts saying ‘undefined’ instead of the latitude…

My code below:

    <script type="text/javascript">
    
    var map;
    var bounds;
    var gmarkers = [];
    var htmls = [];
    var businesses = [ 
       { 
           address: '17/79 West Burleigh Rd, Burleigh Heads, Queensland 4220 Australia', 
           name: 'TEST' 
           }, 
           { 
               address: '39 Ellis Drive, Mudgeeraba, Queensland 4213 Australia', 
               name: 'TEST2' 
           }
    ];
    
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        for (var i = 0; i < businesses.length; i++) {
            cords = setMapMarker(i, businesses[i].address);
            alert(cords);
        }
        bounds = new GLatLngBounds();
        for (var i = 0; i < businesses.length; i++) {
          bounds.extend(new GLatLng(businesses[i].lat, businesses[i].lng));
        }    
        var latSpan = bounds.toSpan().lat();
        map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
      }
    }
    
    function setMapMarker(i, address) {
        var marker;
        var geocoder;
        var place_lat;
        geocoder = new GClientGeocoder();
        geocoder.getLocations(address, function (response) {
            if (response && response.Status.code == 200) {
                place = response.Placemark[0];            
                var html = formatHtml("", address);
                marker = addMarker(place.Point.coordinates[1], place.Point.coordinates[0], html);
                map.addOverlay(marker);    
                place_lat = place.Point.coordinates[1];
            }
        });
        return place_lat;
    }
    
    
   
   
   
    /* OTHER CODE THAT I DON'T THINK IS NECESSARY FOR THIS QUESTION */
   
   
   
    
    function formatHtml(blurb, address) {
        return '<div class="blurb">' + blurb + '</div>\
<div class="address">' + address + '</div>';
    }
    
    // handle clicks from the listing:
    function click(i){
        gmarkers[i].openInfoWindowHtml(htmls[i]);
    }
    
    // set up a new marker
    function addMarker(lat, lon, html){
        var marker = new GMarker(new GLatLng(lat, lon));
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers.push(marker);
        htmls.push(html);
        return marker;
    }
    
    /* JQuery load function */
    
    $(document).ready(function(){
        load();
    });
    
    </script>
2

ever find a solution?

nm, found this:

http://www.systemsevendesigns.com/phoogle

3

Sure did :slight_smile: My javascript

if (GBrowserIsCompatible()) { 
    function createMarker(point,html,html_formatted,index) {
        var letter = String.fromCharCode("A".charCodeAt(0) + index);
        var letteredIcon = new GIcon(baseIcon);
        letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
        markerOptions = { icon:letteredIcon };        
        var marker = new GMarker(point, markerOptions);
        bounds.extend(point);
        if (addressesRequested==addressesReturned) {
            // we've got all our markers
            map.setZoom(map.getBoundsZoomLevel(bounds) - 1);
            map.setCenter(bounds.getCenter());
            }
        GEvent.addListener(marker, "click", function() {
             marker.openInfoWindowHtml(html_formatted);
             });
        return marker;
    }
    
    // Display the map, with some controls and set the initial location 
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    //map.addControl(new GMapTypeControl());
    
    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    
    map.setCenter(new GLatLng(0,0),0);
    
    var bounds = new GLatLngBounds();
    var addressesRequested=0; // counter for number of addresses requested
    var addressesReturned=0;  // counter for number of geocode results returned (could include non-found results)
    
    // Creo GeoCoder Max 1.6 query/sec
    geocoder = new GClientGeocoder();
    
    function showAddress(address, address_formatted, index){
        addressesRequested++; // we've requested another address
        geocoder.getLatLng(address,function(point){
            addressesReturned++; // a result has been returned
            if (point) 
                map.addOverlay(createMarker(point, address, address_formatted, index));
        });
    }

}

Just call the showAddress fucntion and it should do the rest of the work. Can’t remember where I foudn this code. jsut did a bit of searching

4

Do you have the appropriate syntax for calling the function? A working example would probably be most useful. Thanks.