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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    store locator help

    Hi Everyone

    I have a working store locator but just needed a bit of help.

    I followed the Creating a Store Locator with PHP, MySQL & Google Maps tutorial and it works great.

    The only thing I need help in changing is that the addresses appear in drop down menu where as I would like to list it instead of the drop down.

    When you select the the address from the dropdown menu - the marker on the map becomes active which is good.

    I have managed to change the drop down menu to a "ul" but when I click on the address, the marker on the map is not selected - this is where I am having trouble and hoping some one can help.

    Here is the code

    Code:
    <script type="text/javascript">
        var map;
        var markers = [];
        var infoWindow;
        var locationSelect;
    
        function load() {
          map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(40, -100),
            zoom: 4,
            mapTypeId: 'roadmap',
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
          });
          infoWindow = new google.maps.InfoWindow();
    
          locationSelect = document.getElementById("locationSelect");
          locationSelect.onclick = function() {   // the onclick here was originally onchange
            var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
            if (markerNum != "none"){
              google.maps.event.trigger(markers[markerNum], 'click');
            }
          };
       }
    
       function searchLocations() {
         var address = document.getElementById("addressInput").value;
         var geocoder = new google.maps.Geocoder();
         geocoder.geocode({address: address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
            searchLocationsNear(results[0].geometry.location);
           } else {
             alert(address + ' not found');
           }
         });
       }
    
       function clearLocations() {
         infoWindow.close();
         for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(null);
         }
         markers.length = 0;
    
         locationSelect.innerHTML = "";
         var option = document.createElement("li");  //this was originally  ("option")
         locationSelect.appendChild(option);
       }
    
       function searchLocationsNear(center) {
         clearLocations();
    
         var radius = document.getElementById('radiusSelect').value;
         var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
         downloadUrl(searchUrl, function(data) {
           var xml = parseXml(data);
           var markerNodes = xml.documentElement.getElementsByTagName("marker");
           var bounds = new google.maps.LatLngBounds();
           for (var i = 0; i < markerNodes.length; i++) {
             var name = markerNodes[i].getAttribute("name");
             var address = markerNodes[i].getAttribute("address");
             var distance = parseFloat(markerNodes[i].getAttribute("distance"));
             var latlng = new google.maps.LatLng(
                  parseFloat(markerNodes[i].getAttribute("lat")),
                  parseFloat(markerNodes[i].getAttribute("lng")));
    
             createOption(name, distance, i);
             createMarker(latlng, name, address);
             bounds.extend(latlng);
           }
           map.fitBounds(bounds);
           locationSelect.style.visibility = "visible";
           locationSelect.onclick = function() {  // the onclick here was originally onchange
             var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
             google.maps.event.trigger(markers[markerNum], 'click');
           };
          });
        }
    
    	
        function createMarker(latlng, name, address, postcode) {
          var html = "<b>" + name + "</b> <br/>" + address + "</b> <br/>" + postcode;
          var marker = new google.maps.Marker({
            map: map,
            position: latlng
          });
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
          markers.push(marker);
        }
    
        function createOption(name, distance, address, postcode, num) {
          var option = document.createElement("li");   //this was originally ("option")
          option.value = num;
          option.innerHTML = name + "(" + distance.toFixed(1) + ")";
          locationSelect.appendChild(option);
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request.responseText, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function parseXml(str) {
          if (window.ActiveXObject) {
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(str);
            return doc;
          } else if (window.DOMParser) {
            return (new DOMParser).parseFromString(str, 'text/xml');
          }
        }
    
        function doNothing() {}
    
        //]]>
    Hope that makes sense!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    But this code then makes no sense:
    Code:
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
    If locationSelect is no longer a <select> then
    (a) it doesn't have a property named options
    (b) it doesn't have a property named selectedIndex

    Those properties *only* exist for a <select>.

    If you have changed from a <select> to <ul>, then you have to COMPLETELY change how you do things: You can no longer put the onclick on the <ul>. You must put a separate onclick on *each* <li>. You are really talking about a complete rewrite of that stuff.
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Kill off all the code that handles onclick on your locationSelect and maybe do something like this??? (Utterly untested. Off the top of my head.)
    Code:
        function createOption(name, distance, address, postcode, num) {
          var li = document.createElement("li");  
          li.value = num;
          li.innerHTML = name + "(" + distance.toFixed(1) + ")";
          li.onclick = function( ) { google.maps.event.trigger(markers[this.value], 'click'); };
          locationSelect.appendChild(li);
        }
    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:

    dips045 (07-11-2013)

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pendant - can't thank you enough.

    That worked great. Thanks so much.
    Have a great day

    Thanks again

    Quote Originally Posted by Old Pedant View Post
    Kill off all the code that handles onclick on your locationSelect and maybe do something like this??? (Utterly untested. Off the top of my head.)
    Code:
        function createOption(name, distance, address, postcode, num) {
          var li = document.createElement("li");  
          li.value = num;
          li.innerHTML = name + "(" + distance.toFixed(1) + ")";
          li.onclick = function( ) { google.maps.event.trigger(markers[this.value], 'click'); };
          locationSelect.appendChild(li);
        }

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Great. I was coding "blind" but it did make sense.
    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.


  •  

    Posting Permissions

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