Google Map API – Adding address markers and geocoding

December 18, 2007 · Filed Under Getting Started, Resources 

I had a need to add a set of markers to a Google map using the Google Maps API that could be easily modified over time.  It is fairly easy to add markers with the Google Maps API but I wanted to put something together that will do the geocoding at the same time so I don’t have to manually add the lat / lng coordinates when I just want to add an address.  As a result I put together the following bit of script.  The addresses are loaded from an xml file named data.xml, geocoded and then added to the map.  If you are going to use this example for yourself, just add your Google Maps API key and enter the addresses you want to add. You can visit a LIVE SAMPLE or download the full html page and associated data.xml file from HERE. 

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • StumbleUpon
  • Technorati

Comments

24 Responses to “Google Map API – Adding address markers and geocoding”

  1. mark on February 15th, 2008 8:20 am

    I’m interested in the google maps integration on my webpages starter kit installation. I was wondering though if we could feed it a variable to show location of all my members based upon info they provide IE their address? Love to talk with you.

    -Mark

  2. jason on February 15th, 2008 11:56 am

    Mark,

    Should certainly be possible. How are your member addresses stored? (SQL db, excel, xml, etc..) The main issues should getting the addresses formatted into xml that the geocoder can read, return lat/ lng and add to the map. You can contact me at admin@aspstarterkit.com if you want to share more details.

    Jason

  3. venkata ramana on July 8th, 2008 11:19 pm

    Hello,

    my self venkata ramana working in hyderabad, can u plz help from this… i got one task from my manager i.e…

    1)develop a google map api in aspx
    2)in tht no hard coding ,use xml and css files
    3)on txt box and btn should b there
    4)users should enter the name of the place they want to see and click the btn
    5)by cliking the btn they should see the place in the google map

    waiting for ur reply…..its urgent plzzz

  4. jason on July 9th, 2008 2:24 pm

    Hello,

    First a little clarification.
    Are you looking to have a page like the map at getlatlng.com where an address is entered into the text box and a marker is placed on the map?
    That page is mostly driven by addresses but if you enter the name of a famous or well know location (”eiffel tower”, “taj mahal”, “statue of liberty” etc) it will place a marker as well.
    Is that what you are looking for or something different?

    Regards

  5. jason on July 11th, 2008 2:56 pm

    Venkata – I have added a new post that includes code that mimics the getlatlng website – let me know if you are having any problems.

  6. marc on December 17th, 2008 12:14 pm

    Hello,

    This is a great code example. This has really helped me out. I was wondering if you have any quick ideas on adding labels to the maskers.

    Thanks,
    Marc

  7. jason on December 17th, 2008 10:33 pm

    Marc,

    To add labels when a marker is clicked you would use the built in GEvent.addListener and openInfoWindowHtml to detect a click on your marker and display the HTML of your choosing. The HTML can be static, or more interestingly you could add the variables to pull from your xml data.

  8. Jeff on February 14th, 2009 9:12 am

    Jason,

    How do i pull multiple addresses from a db and display them on google maps? Does your code allow for that? Do I require lat/long data, all i have is the street address city state zip info.

    My website, servicebuddy.com currently will display a list of service companies based on location filters and service categories. I would like to display the results wiht a summarized list of accounts on left side (just like google maps provides) and a map on right wiht business locations indicated.

    Also, if you know of any programmers that can do this i would be interested in getting their contact info.

    Thanks,

    Jeff

  9. jason on February 16th, 2009 8:58 pm

    Jeff – it is certainly possible to use a db to store the addresses. Check out the following sample – http://code.google.com/support/bin/answer.py?answer=65622&topic=11364

    While not absolutely required, you should geocode your addresses into lat/ lng for performance and accuracy reasons. You can use a batch geocoding service to geocode your database of addresses into lat/ lng coordinates.

    I don’t have any specific programmer recommendations but you should check out odesk.com – the have a great service for getting you set up with programmers.

    Jason

  10. Amit on March 4th, 2009 11:18 pm

    Hi

    I would like to congratulate you for Nice post.

    I have some questions.

    I am using ASP.net and I have some addresses stored in my SQL 2005 database along with latitude and longitude.

    I want to display this information on th sidebar and place markers also respectively.

    How can I achieve this?

  11. jason on March 5th, 2009 10:25 am

    Amit – The recommended approach is:
    1) Output xml from MS SQL 2005 with the lat/ lng and address (see – http://msdn.microsoft.com/en-us/library/ms971534.aspx)
    2) Use the code from this post to read the xml file and create the markers
    3) You can also use .net to read the xml file and display the info in your side bar

  12. David on April 11th, 2009 11:34 am

    Is there a code that will allow users to add markers to your map? I have been looking everywhere for something like it, it would be nice if they could load photos as well but adding a marker would be huge for my site.

  13. jason on April 11th, 2009 6:53 pm

    David – Following the example in the post you would need to have a form that the user would enter information into and then the form would write the info to the xml file. You can show photos (actually any html is fine) in the info window of the markers but you will need a bit of coding for users to be able to upload.

  14. jim on April 22nd, 2009 12:06 pm

    Great Article. I am new to the google Map api, and was trying to get an xml feed to add the markers. Your a god send.

    One more thing. I want to add an info box…so when people click on the marker, they see the info for that marker. I have seen the demos, etc…and can get info to pop up…but it is not unique to the specific marker. It looks like it is the last marker in the xml data.

    any help would be greatly appreciated.

  15. jason on April 22nd, 2009 1:33 pm

    Jim – Seems like a problem with your event listener or the way your loop is structured in the code. Give me a little bit and I will put up an working example with pop up windows.

  16. jim on April 22nd, 2009 1:41 pm

    thanks man…I figured it was something easy, or something overlooking…but frustrating as all heck!

  17. jason on April 22nd, 2009 2:03 pm

    Jim – I just posted the example. Hope it helps.

  18. anas rahat on July 28th, 2009 1:50 am

    I want to add a google talk API in my website developed on ASP.Net 2.0?

  19. How To Add Google Maps To Your Site | Tyler Merrick on August 24th, 2009 5:46 pm

    [...] Looking to integrate a listing of all your family, clients, business etc into Google Maps? Here is an example of using Google Maps API and geocoding to produce a custom Google map. Read Article… [...]

  20. Erika on November 19th, 2009 8:34 am

    Hello,

    Thanks for a great post!! Have you got a version of exactly this but with the info boxes poping up when you click on a marker?? As well as to automatically calculate the zoom position?

    Many Thanks
    Erika

  21. Dan on November 23rd, 2009 7:42 am

    I like the post!
    but have problem with multiple addresses
    i have to show 100 addresses but yuore code shows only 20
    what can be the problem?

    my XML:

  22. jason on November 23rd, 2009 9:14 pm

    Dan – can you repost or email me the xml you are using? I there is a problem in the xml (or in just one of the xml addresses) it can stop all of the markers from showing up.

  23. jason on November 23rd, 2009 9:16 pm

    Erika – Check out the post “Google Map API – Markers with Pop Up Windows” and I think you will find what you are looking for.

  24. Dan on November 24th, 2009 3:45 am

    I send u the XML file via Email
    thank you!

Leave a Reply