Store locator help

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

pc_mac

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

<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() {   [COLOR="#FF0000"][B]// the onclick here was originally onchange[/B][/COLOR]
    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");  [COLOR="#FF0000"][B]//this was originally  ("option")[/B][/COLOR]
 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() {  [COLOR="#FF0000"][B]// the onclick here was originally onchange[/B][/COLOR]
     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");   [B][COLOR="#FF0000"]//this was originally ("option")[/COLOR][/B]
  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!

kromol

<ul> doesn't have property options
It seems like an issue is here

var markerNum = locationSelect.options[locationSelect.selectedIndex].value;

To take selected item from the list just add something like

class="active"

Then you can take <li> with class active inside <ul>.
And don't forget to toggle class after selecting another item.

pc_mac

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?

kromol

It would be great if you post the original code.
I think it will help.

pc_mac

Thanks, here is the javascript 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:

 <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>

kromol;1277053 wrote:
It would be great if you post the original code.
I think it will help.

kromol

If I understood correct, you posted old code with select instead of ul.
Does this code work or it gives some errors?

pc_mac

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?

pc_mac

Can any one help?