Question

31

Adding a search by zip code in a custom Google map

rated 0 times [ 35] [ 4] / answers: 1 / hits: 22014 / 15 Years ago, wed, july 8, 2009, 12:00:00

First I would like to say that I am new to this site, never worked with Google Maps API and have an intermediate knowledge of JavaScript.

What I have done:
I put together a custom 'store locator' by adding locations to a Google 'my maps'. I then created a web page with a drop down menu and depending on the location you select from the drop down, it changes the the SRC for the iFrame holding the map. So when the page loads you see a larger scale map and by selecting specific locations, it will change the map to that specific location (zoom and crop).

What I need to do:
What I need to do now to complete this map is to add a 'search by zip code' which will allow the user to put in their zip code and have the web page return a list of the closest locations and hopefully their distances.

Does anyone have an idea if I will be able to add the 'search by zip' functionality to my custom Google map?

There really isn't much to my code to post, but if it will help, I'll gladly do so. The current functionality of my map works great, the problem is that I don't know where to begin adding the zip code search.

Here is a link to the page that I am referring to: http://74.53.82.155/store-locator.htm

Any help is appreciated.

Thanks in advance,
gnrlchaos

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rossj

Add To Favorites

Follow

Total Points: 606

Total Questions: 100

Total Answers: 116

Location: Dominican Republic

Member since Sun, Sep 4, 2022

2 Years ago

rossj questions

1 Mock external library call using jest

Mon, Sep 13, 21, 00:00, 3 Years ago

1 Set image src with props

Thu, Jun 17, 21, 00:00, 3 Years ago

1 Chakra UI colorScheme prop on button

Sun, Nov 22, 20, 00:00, 4 Years ago

1 React useState does not update value

Thu, Sep 3, 20, 00:00, 4 Years ago

1 How to add embeds in Discord V12

Sun, Aug 2, 20, 00:00, 4 Years ago

View All

answered 15 Years ago jonmicahm · Accepted Answer

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>