Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Google maps Api Stockist (store locator)

    By reading through many articles online ive managed to doctor a Google maps Api driven by a mysql database. I have it working to point where a user can enter their postcode or town and select a radius.

    The javascript then refers to a php script which pulls back the results and throws them to xml. and then the api sets markers at each stockist point. The map will zoom and center on the center of all these markers fine.

    I have one problem where if you enter a postcode/town and there is only 1 result it is zoomed so far in you get just a white box and the marker. The following is the script I use so if anyone can point out where to set the zoom level of there being just one result i would really appreciate it.

    PHP Code:
        <script type="text/javascript">
        
    //<![CDATA[
        
    var map;
        var 
    geocoder;

        function 
    load() {
          if (
    GBrowserIsCompatible()) {
            
    geocoder = new GClientGeocoder();
            
    map = new GMap2(document.getElementById('map'));
            
    map.addControl(new GSmallMapControl());
            
    map.addControl(new GMapTypeControl());
            
    map.setCenter(new GLatLng(54.622978,-2.592773), 5);
          }
        }

       function 
    searchLocations() {
         var 
    address document.getElementById('addressInput').value ' UK';
         
    geocoder.getLatLng(address, function(latlng) {
           if (!
    latlng) {
             
    alert(address ' not found');
           } else {
             
    searchLocationsNear(latlng);
           }
         });
       }

       function 
    searchLocationsNear(center) {
         var 
    radius document.getElementById('radiusSelect').value;
         var 
    searchUrl 'phpsqlsearch_genxml.php?lat=' center.lat() + '&lng=' center.lng() + '&radius=' radius;
         
    GDownloadUrl(searchUrl, function(data) {
           var 
    xml GXml.parse(data);
           var 
    markers xml.documentElement.getElementsByTagName('marker');
           
    map.clearOverlays();

           var 
    sidebar document.getElementById('sidebar');
           
    sidebar.innerHTML '';
           if (
    markers.length == 0) {
             
    sidebar.innerHTML 'No results found.';
             
    map.setCenter(new GLatLng(54.622978,-2.592773), 5);
             return;
           }

           var 
    bounds = new GLatLngBounds();
           for (var 
    0markers.lengthi++) {
             var 
    name markers[i].getAttribute('name');
             var 
    address1 markers[i].getAttribute('address1');
             var 
    address2 markers[i].getAttribute('address2');
             var 
    town markers[i].getAttribute('town');
             var 
    postcode markers[i].getAttribute('postcode');
             var 
    telephone markers[i].getAttribute('telephone');
             var 
    distance parseFloat(markers[i].getAttribute('distance'));
             var 
    point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                     
    parseFloat(markers[i].getAttribute('lng')));
             
             var 
    marker createMarker(pointnameaddress1address2townpostcodetelephone);
             
    map.addOverlay(marker);
             var 
    sidebarEntry createSidebarEntry(markernametowndistance);
             
    sidebar.appendChild(sidebarEntry);
             
    bounds.extend(point);
           }
           
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
         });
       }

        function 
    createMarker(pointnameaddress1address2townpostcodetelephone) {
          var 
    marker = new GMarker(point);
          var 
    html '<div id="map-hover"><b>' name '</b> <br/>' 
                                                  
    address1 '<br />'
                                                
    address2 '<br />' 
                                                
    town '<br />' 
                                                
    postcode '<br />' 
                                                
    telephone '</div>';
          
    GEvent.addListener(marker'click', function() {
            
    marker.openInfoWindowHtml(html);
          });
          return 
    marker;
        }

        function 
    createSidebarEntry(markernametowndistance) {
          var 
    div document.createElement('div');
          var 
    html '<b>' name '</b> (' distance.toFixed(1) + ')<br/>' town;
          
    div.innerHTML html;
          
    div.style.cursor 'pointer';
          
    div.style.marginBottom '5px'
          
    GEvent.addDomListener(div'click', function() {
            
    GEvent.trigger(marker'click');
          });
          
    GEvent.addDomListener(div'mouseover', function() {
            
    div.style.backgroundColor '#eee';
          });
          
    GEvent.addDomListener(div'mouseout', function() {
            
    div.style.backgroundColor '#fff';
          });
          return 
    div;
        }
        
    //]]>
      
    </script> 
    Last edited by Phil_n; 10-25-2010 at 11:17 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    The zoom level is set by the setCenter call:
    Code:
        map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds))
    So simply set a maximum zoom level of your choice.

    Code:
        var zoom = map.getBoundsZoomLevel(bounds);
        if ( zoom > 15 ) zoom = 15; // or whatever number you decide upon
        map.setCenter(bounds.getCenter(), zoom);
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks for your reply.

    Im not sure I explained my problem clearly. The zoomlevel is fine and works ok as long as there is more than 1 result pulled back from the search. the problem only lies with if there is only 1 result which is quite often as we have some fairly remote areas in the UK.

    I was thinking i need some code to say if results = 1 then set marker point and zoom to this else carry on as normal. unless there is an easier fix.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    So just change this bit:

    Code:
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    to something like:

    Code:
    if (markers.length > 1){
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
    }else{
       map.setCenter(bounds.getCenter(), 5); // or whatever zoom level you want
    }

  • Users who have thanked Spudhead for this post:

    Phil_n (10-27-2010)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Did you *TRY* the code I gave????

    I'm pretty sure it does the same thing that Spudhead's code will do.

    You said that the zoom level that was automatically chosen by
    Code:
        map.getBoundsZoomLevel(bounds)
    wat too high. So my solution was to simply *LIMIT* that value to some maximum of your choice.

    Heck, my solution would even work if, say, there were two stores within a KM or two of each other. In that situation, the zoom level still might be higher than you would like. So my answer would limit it to whatever you think is an acceptable max level.

    Spudhead's answer only changes the zoom level when there is exactly one store found.

    Which, of course, might be all you need. But isn't mine a more general solution?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you still like Spudhead's answer better, it can be simplified:
    Code:
       map.setCenter( bounds.getCenter(), 
                      markers.length > 1 ? map.getBoundsZoomLevel(bounds) : 12
                    );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Phil_n (10-27-2010)

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Did you *TRY* the code I gave????

    I'm pretty sure it does the same thing that Spudhead's code will do.

    You said that the zoom level that was automatically chosen by
    Code:
        map.getBoundsZoomLevel(bounds)
    wat too high. So my solution was to simply *LIMIT* that value to some maximum of your choice.

    Heck, my solution would even work if, say, there were two stores within a KM or two of each other. In that situation, the zoom level still might be higher than you would like. So my answer would limit it to whatever you think is an acceptable max level.

    Spudhead's answer only changes the zoom level when there is exactly one store found.

    Which, of course, might be all you need. But isn't mine a more general solution?
    that is exactly what i was after. i only had the problem when there was only one store. sorry i may not of explained properly. thank you both for your help.


  •  

    Posting Permissions

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