title: Google Maps - Finding all the markers inside a given radius Javascript/Php
body: <p>I have this script that will show custom markers on a google map, but I would like to include a input text-box and be able to enter a city/state and a zip-code and see if there are any markers within lets say 400 miles from that city/state or zip-code. I would love it if the map can be dynamic so as you type out the city/state or zip-code it will show the results on the map by getting rid of all the other markers and leaving only the one that is within that radius, if that is too hard then a simple alter box saying what unit is the closest will also be OK :) I searched and found some say that I should load the geometry library and use <code>computeDistanceBetween()</code> to find the distance of each marker from your center point but I have no idea how to do the zip-code part or how to put all of this together to work.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt; 
     var image = new google.maps.MarkerImage("marker-images/image.png",new google.maps.Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35));
  
     var shadow = new google.maps.MarkerImage(
                              'marker-images/shadow.png',
                              new google.maps.Size(62,35),
                              new google.maps.Point(0,0),
                              new google.maps.Point(20,35)
                            );
  
     var shape = {
                  coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
                  type: 'poly'
            };
  
       // this variable will collect the html which will eventually be placed in the side_bar 
       var side_bar_html = ""; 
  
       // arrays to hold copies of the markers and html used by the side_bar 
       // because the function closure trick doesnt work there 
       var gmarkers = []; 
  
       // global "map" variable
       var map = null;
       var circle = null;
  
       //marker clusterer
       var mc;
       var mcOptions = {gridSize: 10, maxZoom: 8};
  
       //global infowindow
       var infowindow = new google.maps.InfoWindow();
  
       //geocoder
       var geocoder = new google.maps.Geocoder(); 
       var address = new Array("41.8119,-87.6873",
                          "40.7888,-74.056",
                          "41.8119,-87.6873",
                          "48.6681,-97.3627",
                          "44.9793,-93.273",
                          "39.4857,-75.6775",
                          "41.8119,-87.6873",
                          "42.0203,-87.9059",
                          "32.7812,-96.7903",
                          "27.5159,-99.4941",
                          "32.7812,-96.7903",
                          "37.5608,-95.6684",
                          "41.8119,-87.6873",
                          "38.3763,-97.6702",
                          "42.2458,-83.2491",
                          "41.8122,-91.9139",
                          "41.8397,-88.0887",
                          "41.8397,-88.0887",
                          "38.5128,-122.787",
                          "41.8397,-88.0887",
                          "42.8863,-87.892",
                          "42.8863,-87.892",
                          "30.7539,-83.3321",
                          "39.889,-84.2422",
                          "34.106,-83.589");
       var content = new Array("Unit No# 0206",
                          "Unit No# #2003",
                          "Unit No# 0176",
                          "Unit No# #2001",
                          "Unit No# 0124",
                          "Unit No# 0157",
                          "Unit No# #0162",
                          "Unit No# 0104",
                          "Unit No# 0118",
                          "Unit No# #2007",
                          "Unit No# 0112",
                          "Unit No# 0139",
                          "Unit No# 0205",
                          "Unit No# 0127",
                          "Unit No# 0187",
                          "Unit No# 0105",
                          "Unit No# 0214",
                          "Unit No# 0186",
                          "Unit No# 0173",
                          "Unit No# 0134",
                          "Unit No# 0128",
                          "Unit No# 0125",
                          "Unit No# 0158",
                          "Unit No# 0193",
                          "Unit No# 0201");
  
       //min and max limits for multiplier, for random numbers
       //keep the range pretty small, so markers are kept close by
       var min = .999999;
              var max = 1.000001;
  
      function createMarker(latlng,text) {
        var marker = new google.maps.Marker({
           draggable: false,
           raiseOnDrag: false,
           icon: image,
           shadow: shadow,
           shape: shape,
           position: latlng,
           map: map
         });
  
       ///get array of markers currently in cluster
       var allMarkers = mc.getMarkers();
  
       //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
          for (i=0; i &lt; allMarkers.length; i++) {
            var existingMarker = allMarkers[i];
            var pos = existingMarker.getPosition();
  
            if (latlng.equals(pos)) {
              text = text + " &amp; " + content[i];
            }                   
          }
        }
  
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.close();
          infowindow.setContent(text);
          infowindow.open(map,marker);
        });
        mc.addMarker(marker);
        return marker;
      }
      function initialize(){
          var options = { 
              zoom: 4, 
              center: new google.maps.LatLng(39.8282,-98.5795), 
              mapTypeId: google.maps.MapTypeId.ROADMAP 
          };
          map = new google.maps.Map(document.getElementById('map'), options); 
  
      //marker cluster
          var gmarkers = [];
          mc = new MarkerClusterer(map, [], mcOptions);
          for (i=0; i&lt;address.length; i++) {
             var ptStr = address[i];
             var coords = ptStr.split(",");
             var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
             gmarkers.push(createMarker(latlng,content[i]));
          }
      }
  
            function codeAddress() {
              var address = document.getElementById('address').value;
              var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;
              geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
                  var marker = new google.maps.Marker({
              //        map: map,  &lt;-- uncomment to show red marker
                      position: results[0].geometry.location
                  });
                  if (circle) circle.setMap(null);
                  circle = new google.maps.Circle({center:marker.getPosition(),
                                                   radius: radius,
                                                   fillOpacity: 0.35,
                                                   fillColor: "#FF0000",
                                                   map: map});
                  var bounds = new google.maps.LatLngBounds();
              var foundMarkers = 0;
                  for (var i=0; i&lt;gmarkers.length;i++) {
                    if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),marker.getPosition()) &lt; radius) {
                      bounds.extend(gmarkers[i].getPosition())
                      gmarkers[i].setMap(map);
              foundMarkers++;
                    } else {
                      gmarkers[i].setMap(null);
                    }
                  }
                  if (foundMarkers &gt; 0) {
                    map.fitBounds(bounds);
              } else {
                    map.fitBounds(circle.getBounds());
                  }
                } else {
                  alert(status);
                }
              });
            }
  
      var infowindow = new google.maps.InfoWindow(
        { 
          size: new google.maps.Size(150,50)
        });
  
  
      function handleKeyPress(e){
       var key=e.keyCode || e.which;
        if (key==13){
           codeAddress();
        }
      }
  
      function handleResetKeyPress(e){
          if (map.getZoom() != 4) map.setZoom(4);
            map.setCenter(new google.maps.LatLng(39.8282, -98.5795));
          document.getElementById("address").value = 'Enter City,State or Zipcode';
          document.getElementById("radius").value = '200';
      }
      &lt;/script&gt; 
  
      &lt;style&gt;
      html, body, #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      }
      .auto-style1 {
          text-align: center;
      }
        #footer {
          position : absolute;
          bottom : 0;
          height : 40px;
          margin-top : 40px;
       /* border: 1px solid blue; */
        }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body onload='initialize()'&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;div id="footer" class="auto-style1" style="left: 0px; bottom: 0; width: 100%"&gt;
            &lt;input type="text" id="address" value="Enter City,State or Zipcode" onclick="if(this.value=='Enter City,State or Zipcode'){this.value=''}" onblur="if(this.value==''){this.value='Enter City,State or Zipcode'}" onkeypress="handleKeyPress(event);" style="width: 183px"&gt;
            &lt;input type="button" value="Search" onclick="codeAddress();"&gt;
            &lt;input type="button" value="Reset" onclick="handleResetKeyPress();"&gt;
            &lt;input type="text" id="radius" value="200" style="width: 42px" onclick="if(this.value=='200'){this.value=''}" onblur="if(this.value==''){this.value='200'}" onkeypress="handleKeyPress(event);"&gt; miles
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>