Google Maps API v3 Store locator with radius: control output of the map if there are no storages in the custom radius

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

My problem is that when I enter a location and radius and there are no shops 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 were all about getting the locator to work. If I missed something, I'm sorry! Also, I'm a beginner when it comes to javascript, so logic-by-code answers are appreciated!

Thank!


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');
   };
  });
}

      

+3


source to share


1 answer


After a lot of trial and error, I had a moment of aha and I figured out where to put the if / else statement to save my map from the Pacific:

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");

      

Here I will put an if statement. It immediately after capturing all marker locations within the selected radius and says that if there are markers to continue as usual:



   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 else what to do if there are no markers in 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');
   };

 });
}

      

+6


source







All Articles