Geek Answers Handbook

Adding a postal code search to a custom Google map

At first I would like to say that I am new to this site, have never worked with the Google Maps API and did not have intermediate JavaScript knowledge.

What I did: I put together a custom "storage locator" by adding locations to Google My Maps. Then I created a webpage with a drop-down menu, and depending on the location you chose from the drop-down list, it changes the SRC for the iFrame holding the map. Therefore, when the page loads, you see a map of a larger scale and, choosing specific locations, it will change the map to that specific location (scaling and cropping).

What I need to do: Now I need to do this in order to add a “postal code search” that allows the user to enter their zip code and return the web page with a list of the closest places and, hopefully, their distances.

Does anyone have an idea if I can add the "zip search" functionality to my custom Google map?

There really isn't much to my code, but if that helps, I will be happy to do it. The current functionality of my card works fine, the problem is that I don’t know where to start adding a zip code.

Here is the link to the page I'm linking to: http://74.53.82.155/store-locator.htm

Any help is appreciated.

Thanks in advance, gnrlchaos

+4
source share
3 answers

One option is to use the geonames web service, which returns locations from zip codes . Here is a quick example of using this 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>
+3
source

I don’t know how you can interact with the built-in Google map the way you want. The best option would be to create your own map with the Google Maps API . Google has excellent documentation and examples to get you started.

+1
source

Hey, I am also working on a similar search. I found a pretty good discussion of the math involved, as well as links to queries and formulas, here: http://uclue.com/?xq=2861 . hope this helps.

0
source

More articles:


All Articles