Only a truly geeky developer can understand the concept that I’ve been working and writing so much code lately they I need to take a break by… well.. writing more code…

Anyway! My brain needed a break from my current assignments so I decided to tackle a question I saw posted about populating address fields in SharePoint with a click on a location from a map plugin. It seemed like a nice challenge and something I KNEW could be tackled as long as the proper map API existed… This turned out to be super simple when all was said and done…

By the way this works in both SharePoint 2010 and the SharePoint formerly known as MOSS.

Google Maps or Bing?

At first I needed to decide whether to use Google Maps or Bing Maps… I was really hoping to take advantage of Bing because, well.. you would think it would make more sense to have two Microsoft products working together. Unfortunately, I could not find any way to “Reverse Geocode” (basically get an address from a latitude and longitude) out of the box with Bing. I’m assuming there’s an additional web service I could call to get an address from a Lat/Long, but I just wanted to get a proof of concept going and show it could be done. So, if you just HAVE to use Bing, you could, but you need to find a Web Service that will get the address for you.

Fortunately, Google Maps already has the functionality for Reverse Geocoding built in so I didn’t have to do any additional web service calls or research. I decided to go with that. I first looked at using V3 of Google Maps, but apparently it uses HTML 5 and we all know how well IE plays with HTML 5. So, I dropped back down to V2. I imagine the code for V3 would be very similar. I found 95% of what I needed in the Google Maps Documentation under the “Reverse Geocoding” section at: http://code.google.com/apis/maps/documentation/javascript/v2/services.html

The Script

Under the aforementioned section is an example that uses Reverse Geocoding.. like I said.. this is 95% of what you need. It looks like:

From looking at this example Script you can see under the “showAddress” function it is popping up a “marker” with the address (place.address). We simply need to grab this address and push it to our SharePoint Form. The address is in one long string “1234 Main St., Harrison, AR 72601, USA” so we will need to parse the string to break out each individual element. For the purposes of this prototype I just did a split at the commas and spaces, this works a majority of the time for US addresses but no way in the world will it work for most countries or street addresses that may contain a comma. So, again, this is not production quality code, you aren’t paying me for that. That quick and dirty code looks like:

Now we need to stuff these values into our SharePoint form fields. jQuery makes this very easy. You can set a SharePoint Form field on the New and Edit forms using the syntax “$("input[title='<field name>']").val(<value>);”. So the previous code becomes:

This of course assumes your SharePoint List has the fields “Country”, “Zip”, “State”, “City”, and “Address”. If not, change the script accordingly. So, when we add our modifications to the example from Google we get (note that I removed the ‘pop-up’ marker that was there before, you can leave that in there if you want):

Okay.. that’s all fine and dandy, but we need to format this in such a way that we can drop it into a js file that we can easily use it in SharePoint by linking a CEWP to it. We also need to make sure to load the GoogleMaps library and jQuery. You will also need to request a Google Maps API Key from Google. It’s a completely painless process. So, when we do all that, our script becomes:

Okay.. You’re not impressed.. What’s next?

So… I decided to add another field to my Address list that stores the address unparsed. I then dropped a DVWP on the page that displays all the addresses and added a column that pushes this unparsed address back to the Google Maps API to display the location on the map. Feel free to play with that too.

<update>

Remember my mantra? Use the KISS principle… after getting a decent nights rest I realized it made zero sense to store the unparsed address as separate field to push back to Google Maps for two big reasons:

1) If you manually enter an address there is no “unparsed” address to store.

2) It’s making a simple problem more difficult.

What I ended up doing was creating a new Calculated Column field that concatenates the address fields in the form and then that calculated field is what I push to Google Maps. So, you Mavericks that are manually inputting an address and saying “haha.. it doesn’t work”.. well.. that works now…

So.. basically… you SHOULD be able to enter any address manually, save it, and then click the “View In Map” link to see it in the map.

I also added a button just above the Map… If you manually enter an address then click that button, the map should display that address (kind of a poor man’s address verification?).

</update>

Hope you learned something, or at least weren’t completely bored… Thanks again for stopping by.

#re: Using Google Maps to Populate an Address in a SharePoint New Item Form

Mark,I love that you've taken the google maps SharePoint maps combo into the new decade with the update to jQuery. I've been planning an update to my SharePoint Maps Series for a while, and the switch to jQuery is one piece I'll have a good head start on now with your great post!Thanks,Tom

#re: Using Google Maps to Populate an Address in a SharePoint New Item Form

Mark,You're welcome!I think you'll find you can do what you want in Bing too after you look at it a little more. I have some bing examples up, but I know the original bing example on the SharePoint Designer Team Blog post did break on a bing maps api version change. Glad to see another into Mapping Mashups in SharePoint.Tom

#re: Using Google Maps to Populate an Address in a SharePoint New Item Form

Do you really believe Google would release a version that doesn't work on Internet Explorer? You must be kidding...Oh well, anyway I was not able to get v3 to work either (but this has certainly more to do with SharePoint quirks than IE). I posted my question on SharePoint Overflow:http://sharepoint.stackexchange.com/questions/14920/google-maps-v3-on-web-part-page

Mark,I finally got around to digging in to this and decided I wanted a Google Maps v3 version of the code.I've got a working example on my website that you can try your original and the updated v3 version on.http://tomresing.com/examples/SitePages/Map%20Examples%20ReadMe.aspx-Tom