I followed the Google Maps Store Locator Tutorial and built a locator that takes a user's location and a radius, then outputs all store locations within that radius of the user's location. And for the most part, it works!

My problem is that when I input a location and radius and there are no stores within that radius, my locator centers the map to the middle of the Pacific Ocean.

I did my best to research other store locator questions, but they all were about getting the locator itself to work. If there's something I missed, I apologize! Also, I'm a beginner when it es to javascript, so answers with the logic behind code are appreciated!

Thanks!

function searchLocationsNear(center) {
 clearLocations();

 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = 'storelocator_getXML.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 phone = markerNodes[i].getAttribute("phone");
     var fax = markerNodes[i].getAttribute("fax");
     var directions = markerNodes[i].getAttribute("directions");
     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, address, distance, i);
     createMarker(latlng, name, address, phone, fax, directions);
     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');
   };
  });
}

I followed the Google Maps Store Locator Tutorial https://developers.google./maps/articles/phpsqlsearch_v3 and built a locator that takes a user's location and a radius, then outputs all store locations within that radius of the user's location. And for the most part, it works!

My problem is that when I input a location and radius and there are no stores within that radius, my locator centers the map to the middle of the Pacific Ocean.

I did my best to research other store locator questions, but they all were about getting the locator itself to work. If there's something I missed, I apologize! Also, I'm a beginner when it es to javascript, so answers with the logic behind code are appreciated!

Thanks!

function searchLocationsNear(center) {
 clearLocations();

 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = 'storelocator_getXML.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 phone = markerNodes[i].getAttribute("phone");
     var fax = markerNodes[i].getAttribute("fax");
     var directions = markerNodes[i].getAttribute("directions");
     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, address, distance, i);
     createMarker(latlng, name, address, phone, fax, directions);
     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');
   };
  });
}

• javascript
• google-maps

1 Answer 1

After a lot of trial and error, I had an aha moment, and I found out where to put an if/else statement to keep my map out of the Pacific Ocean:

function searchLocationsNear(center) {
 clearLocations();

 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = 'storelocator_getXML.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 downloadUrl(searchUrl, function(data) {
   var xml = parseXml(data);
   var markerNodes = xml.documentElement.getElementsByTagName("marker");

I put an if statement here. It's right after grabbing all the marker locations within the selected radius and says, if there are markers to continue as normal:

   if(markerNodes.length>0){

   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 phone = markerNodes[i].getAttribute("phone");
 var fax = markerNodes[i].getAttribute("fax");
 var directions = markerNodes[i].getAttribute("directions");
     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, address, distance, i);
     createMarker(latlng, name, address, phone, fax, directions);
     bounds.extend(latlng);
    }
    map.fitBounds(bounds);

And here, I put the else, for what to do when there are no markers within the radius:

  } else {
    alert('Sorry, there are no stores that close to your location. Try expanding your search radius.');
   }

   locationSelect.style.visibility = "visible";
   locationSelect.onchange = function() {
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
     google.maps.event.trigger(markers[markerNum], 'click');
   };

 });
}