Google-maps – How to add a zip code search box to the Google Map that will only search the markers

google mapsgoogle-maps-api-3

I have created a map using the Google Maps API v3.

I have created a Fusion Table with a hundred locations (markers) or so and have that successfully pulling into my map.

Now I need to add a search box to this page that will allow the user to enter their zip code and have the map zoom in to that area, then only seeing the locations in that zip code or the nearest locations to that zip code. I would also like the location data to pull into a sidebar as seen with the now deprecated Local Search API.

I have read most (if not all) of the posts that seemed to be about this, but to no luck. I feel like this shouldn't be that difficult really, I mean Google does search primarily right? Yet adding a search bar to my custom map is such a difficult task.

Any help would be appreciated, I have a deadline of tomorrow. Thanks everyone, I love it here.

Ryan

Best Answer

You will need to geocode the zip code and use the results to center the map, then show the markers that fit the bounds of the map if they are not already shown.

See http://code.google.com/apis/maps/documentation/javascript/geocoding.html

There is an example with a search box.

Related Solutions

Javascript – Adding a search by zip code in a custom Google map

One option is to use the geonames web service that returns locations from zip codes. Here's a quick example of how to use that web service with dojo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="layout.css">
        <script type="text/javascript">var djConfig = { parseOnLoad: true }</script>
        <script type="text/javascript" src="../dojo-release-1.3.0/dojo/dojo.js"></script>
        </script>
        <script type="text/javascript">
            dojo.require("dojo.io.script");
                function getPlace() {
        var zip = dojo.byId('zipcode').value;
        console.log('zip is ', zip);
        //use country code to get results for a specific country
        //var gn_url = 'http://ws.geonames.org/postalCodeLookupJSON?postalcode=' + zip + '&country=US';
        var gn_url = 'http://ws.geonames.org/postalCodeLookupJSON?postalcode=' + zip;
        console.log(gn_url);
        dojo.io.script.get({
          url: gn_url, 
          callbackParamName: "callback",
          load:function(response, io) { 
            console.log('got json.'); 
            console.dir(response); 
            places = response.postalcodes; 
            var infos = []
            dojo.forEach(places, function(p, i) {
                infos[i] = p.placeName + ', ' + p.adminName1 + ', Lat: ' + p.lat + '; Long: ' + p.lng + '<br />';
            });
                dojo.byId('postalCode').innerHTML = infos.join('');
          }, 
          error:errorCb
        });   
        }

        function errorCb(type, data, evt){
                debug(data);
        }
         </script>
     </head>
     <body class="tundra">
    Enter a zip code: <input id="zipcode" type="text" /> <button onclick="getPlace(); return false;" value="Find Place.">Find Place.</button>
      <div>Places:</div><div id="postalCode"></div>
    </body>
</html>

Javascript – Google Maps API v3: How to remove all markers

Simply do the following:

I. Declare a global variable:

var markersArray = [];

II. Define a function:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Push markers in the 'markerArray' before calling the following:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Call the clearOverlays(); or map.clearOverlays(); function wherever required.

That's it!!

Best Answer

Related Solutions

Javascript – Adding a search by zip code in a custom Google map

Javascript – Google Maps API v3: How to remove all markers

Related Topic