Google Map API – Adding address markers and geocoding
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.Â
Comments
39 Responses to “Google Map API – Adding address markers and geocoding”
Leave a Reply
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
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
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
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
Venkata – I have added a new post that includes code that mimics the getlatlng website – let me know if you are having any problems.
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
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.
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
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
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?
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
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.
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.
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.
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.
thanks man…I figured it was something easy, or something overlooking…but frustrating as all heck!
Jim – I just posted the example. Hope it helps.
I want to add a google talk API in my website developed on ASP.Net 2.0?
[...] 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… [...]
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
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:
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.
Erika – Check out the post “Google Map API – Markers with Pop Up Windows” and I think you will find what you are looking for.
I send u the XML file via Email
thank you!
Hi,
I was wondering if you can get an address by just clicking on the map, the project im working on is for getting statisitcs. So the user just multi clicks the area needed and i should be looking inside that area so i thought of searching by district because you see i have this huge DB and i want to search by districts, so is there any way the address is retrieved when the users clicks on the map?
Thanks!!
Hi I just got an website and I want to display my members location on google maps with a small pictuer of the member. can this be done? if so how can I do it I’m very very new to all these things and with no knowledge of HTML. please help
Wow, just what I was looking for; great work!
This is great. Is there anyway to force the javascript to recheck the xml and redraw new markers in the xml file, when the page refreshes.
I’m trying to create a page that will refresh itself every 10 mins, and mark any new points added to the xml file.
Problem is when I reload the index.html file thru the brower, it doesn’t recheck the xml file. It is only when I close the page and open again will the new markers appear.
Thanks
Hi , your example works perfectly , but how can I add some custom icon , custom html in info window and etc to function AddtoMap() ?? plz help
Basically I am designing a website for my final year project which should allow members to car share.
But what I am really stuck on is the fact that tutorials in Google do not provide the code for ASP.Net with C# or if I am using SQL server.
What I want my website to do is, show icons on the map of all the car sharers within a certain radius whose preferences match with the user. I am not using a login as I might not have time – but say if I was the user, I want the website to compare my preferences with all the members, and those who match, will be shown on the google map, when I hit the command button ’search’. Preferences are things like ‘Smoker/Non-Smoker’, Gender they are willing to travel with etc.
Can you tell me how to do this, or if it is possible to do it in 3 or 4 days time? I am not gonna have too many records in the database, just a few so that the system can demonstrate it can do the stuff.
Thanks.
Xavier – Check out this link for code samples on how to Combine External Data Sources with a MS SQL Server Database to Create Google Maps Using AJAX and ASP.NET. Seems to fit the bill of what you are trying to do.
Thanks Jason, I will have a look at it.
Hi Jason,
Thanks for the link, but I found the code that you gave at the top of this page much easier. Is there no way the XML file could hold the addresses based on the search criteria when a query is initialised. Is there no way the database updates the xml file?
Also the source you mentioned, does not actually say how I can get specific data to be shown based on the preferences of the user who is logged in? Any tips?
Hi Jason,
I got the database to output the records in XML file, but its in a different format then the one you posted above. By looking at the following data from the database generated XML file, how could I adapt my aspx code so that it selects the address value from the XML file generated by the database?
This is the xml file that i get:
adsad@ad.com
asda
asd
asd
xxxx
Male
Withdean
0
asd@ad.com
asd
ad
asd
xxxx
Female
Hailsham
As you can see there is no quotation mark or ‘Marker’/'Markers’ element specified. What do I do?
I’m trying to add a form field that when submitted adds the address marker (as nicely demonstrated here) that updates an XML file and the XML file spits out the content that is in the sidebar, adding the point and making the marker clickable/pop-out. I’ve found help on each of these things separately but am having a time putting it together.
I’ve tried a function that deletes the last line “” and then reads it after the fopen, write, but nothing was written. Everytime I get one thing working something else breaks. Having a tough time as I’m new to Google Maps.
Any help would be amazing.
thomas
thomas.g.bennett@gmail.com
Hello Jason,
This example is great! Got me up and running after trying several things. Admittedly, I am a total beginner with Google Maps API. I had a similar issue to Dan whilst trying to call out say, 100 or 200 addresses. Is this the 100ms limit I heard about? How to curb this? Check out the map here:
http://dhubfablab.cat/ccloud/maps/ccloud_Geotags.htm
And the xml file:
http://dhubfablab.cat/ccloud/maps/cities3.xml.
Any help would be appreciated! Really, excellent example!
Luis
Luis,
If you are having a large number of entries in the xml file I recommend storing actual lat/ lng coordinates rather than geocoding the whole list everytime the webpage is pulled up. Performance is slow when geocoding a large number of entries. You can look at my most post “Google Map API – Markers with Pop Up Windows” which uses lat/ lng coordinates rather than an address as an example. Good luck with your project!
Jason
Cheers Jason,
I appreciate the reply. I guess I wanted this to be a bit more dynamic. Maybe I can just write something that does the geocoding separately and then the page looks at the geocoded cities.
Luis
Best of luck. A two step approach can certainly work.
Cheers!