SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Maps API - showing multiple addresses problem

    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:

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

    It alerts saying 'undefined' instead of the latitude...

    My code below:

    Code JavaScript:
        <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>\n<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. #2
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,939
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ever find a solution?


    nm, found this:

    http://www.systemsevendesigns.com/phoogle
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  3. #3
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure did My javascript

    Code:
    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. #4
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,939
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have the appropriate syntax for calling the function? A working example would probably be most useful. Thanks.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •