www.webdeveloper.com
Results 1 to 8 of 8

Thread: Store locator help

  1. #1
    Join Date
    Dec 2009
    Posts
    51

    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!
    Looking forward to the replies!

  2. #2
    Join Date
    Jul 2011
    Posts
    127
    <ul> doesn't have property options
    It seems like an issue is here
    Code:
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
    To take selected item from the list just add something like
    Code:
    class="active"
    Then you can take <li> with class active inside <ul>.
    And don't forget to toggle class after selecting another item.

  3. #3
    Join Date
    Dec 2009
    Posts
    51
    Oh yes of course its that line! I didn't think of that I thought I had covered it and it was only a minor error I was missing!!!

    Maybe the ul element is not ideal to use here?

    If I give <li> the active class, will this also select the marker on the map?

    I was thinking maybe the "onclick" which was originally onchange (so when you select the address from the drop down menu the marker on the map is also selected) will work for li.

    Is there are better/easier route? I don't have to use an unordered list.
    I need to show the address that when you click the marker on the map is also selected.

    Hope you don't mind helping further? I'm lost for ideas

    I can post the original code with the drop down menu if it will help make things clear?

  4. #4
    Join Date
    Jul 2011
    Posts
    127
    It would be great if you post the original code.
    I think it will help.

  5. #5
    Join Date
    Dec 2009
    Posts
    51
    Thanks, here is the javascript code:

    Code:
     <script type="text/javascript">
        //<![CDATA[
        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.onchange = function() {
            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("option");
         option.value = "none";
         option.innerHTML = "See all results:";
         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.onchange = function() {
             var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
             google.maps.event.trigger(markers[markerNum], 'click');
           };
          });
        }
    
        function createMarker(latlng, name, address) {
          var html = "<b>" + name + "</b> <br/>" + address;
          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, num) {
          var option = document.createElement("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() {}
    
        //]]>
      </script>
    Heres the HTML if needed:

    HTML Code:
     <div>
         <input type="text" id="addressInput" size="10"/>
        <select id="radiusSelect">
          <option value="25" selected>25mi</option>
          <option value="100">100mi</option>
          <option value="200">200mi</option>
        </select>
    
        <input type="button" onclick="searchLocations()" value="Search"/>
        </div>
        <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
        <div id="map" style="width: 100%; height: 80%"></div>
    Quote Originally Posted by kromol View Post
    It would be great if you post the original code.
    I think it will help.

  6. #6
    Join Date
    Jul 2011
    Posts
    127
    If I understood correct, you posted old code with select instead of ul.
    Does this code work or it gives some errors?

  7. #7
    Join Date
    Dec 2009
    Posts
    51
    it doesn't give errors

    When I search for an address, its shows up ok but when I click on the address, I was expecting the marker on the map to also be selected.... as it does when you select an address from the drop down menu.

    Only difference is I don't want to populate a drop down menu, I want the addresses just to be listed...

    Hope that make sense?

  8. #8
    Join Date
    Dec 2009
    Posts
    51
    Can any one help?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles