Create a Link to Map an Address

Ever wanted to create a link in a SharePoint contact list or InfoPath form to click to view a map of a certain address?  This technique is so simple, it will blow your mind!  There are other ways, which entail embedding images, using REST web services and other custom code, but this one simply opens that address in the browser in a Bing map.

This can be done in SharePoint 2007, 2010, and in Office 365.

I’ll show you two ways to go about it.  In both of these cases, I’ll assume you already have created fields for Street Address, City, State, and Zip code.

ch5[124]

In InfoPath, here are the basics:
  1. Create a new field, and call it Map.
  2. Double click the name of the Map field to open its properties.
  3. Next to the Default value box, click the function button.
  4. Create a concatenation formula.  We’re going to string together (concatenate) all of the address fields, into a specific URL.
    concat(“http://www.bing.com/maps/?q=”, (LocationAddress, “%2C%20”, LocationCity, “%2C%20”, LocationState, “%20%20”, LocationZip, “&FORM=Z9FD”)
    ch5[127]
  5. Click OK.
  6. The default value will now look something like this, and be sure to leave the box checked so that the formula will always be refreshed.
    ch5[146]
  7. Click OK.
  8. Insert a cute little image into your form, something that looks like a map or globe or something.
  9. Click to select that image, and then on the Insert tab, choose Hyperlink.
  10. Click to select a Data Source for the Link To, and choose that Map field that you created earlier.  Click OK.
    ch5[147]
  11. Done!  Publish the form, and when you open the form and click the little map button, the browser will open to the Bing map of that location.
In SharePoint Designer, a form
  1. In SharePoint Designer, click the name of your list or library.   In this example, it’s the out of box contacts list.  In the Forms section on the right, click New, and create a new display form.
  2. Call it CustomDisplay, and set it as the default form.
    (For the SharePoint 2007 method, Customize Form Pages in SharePoint (Video))
  3. Open this new form, and put the cursor in the Notes field, which is the last row of the table.  Click the TAB key so that a new row is created at the end.
  4. Type “Map It” in the left cell, and in the right cell, insert that same graphic of something mappy.
  5. Click to select the image that you just inserted.  It doesn’t have to be an image, you can just put a regular hyperlink in here.  On the Insert tab in the ribbon, click Hyperlink.
  6. Paste the URL in the address box, and click OK:
    http://www.bing.com/maps/?q={@WorkAddress}%2C%20{@WorkCity}%2C%20{@WorkState}%20%20{@WorkZip}&FORM=Z9FD
    ch5[148]
  7. Save the page, and close SharePoint Designer.  Open your contacts list in the browser, and open one of the contacts that has a real address in it.  Click the icon you created, which will open the map!
    ch5[160]
Advertisements

5 comments

  • Hi Laura, I’m loving this little idea! Thanks for sharing. Do you know if Bing has a list of acceptable parameters, or is passing in location details with ‘commar space’ all that is required? When I made the ‘Map’ data into a hyperlink column to allow list view of submitted items, it fails if data was entered into Location Address with a space. I’m guessing I could place some formula onto the Location Address field in the form to output spaces as %20?

    Like

  • Hi Laura, I am an avid follower of your writings. This article sparked some interest because I have a requirement on an IP SOAP form to calculate mileage. Do yoju think if we have the source and target locations we could get the total mileage from the map details?

    Like

  • Hi Laura, Great post, but . . . . is it also possible to do without Infopath of Sharepoint Designer?

    Like

  • @Ron, I have never tried this but just thinking about it, if you used a calculated column and built the hyperlink in there based on the other fields using the same url above I would imagine you would have the same outcome. @Larry, I am not sure of Bings mapping api, but I have done similar workings for our own mileage calculator using Google’s map api. The only problem with google’s is you have to create an api account and have the text file it will generate for authentication available on your farm. @Laura, Great post, simplistic and very functional as always!

    Like

  • Thanks guys, glad you like it! Sure, this could probably be done in a calculated column, although I haven’t tried it.

    Like

Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s