Google Maps in SharePoint 2010 using standard functionality.

Introduction.

In SharePoint 2010 you can use Google Maps without having to download extra webparts or third party tools. In this article I will explain how you can insert “Google Maps” maps in your SharePoint 2011 site with only using standard out of the box SharePoint 2010 features.

It’s a generic solution which can also be used to store HTML code that defines Flash and Silverlight HTML ‘assets’.

1. Get your Google map code.

  • Go to Google maps
  • Find the location you want.
  • In the right hand corner of the map click on “Link”
  • Next click on “Customize and preview embedded map”.
  • Enter the desired options.
  • Copy the HTML code that Google generates for you.
  • Paste the HTML code in a text file (use notepad).
  • Save the text file to your hard drive.

So you have the Google Map HTML code sitting in a text file now. Next step is to upload this file in SharePoint

2. Store the HTML code in SharePoint.

  • Go to your SharePoint site.
  • Click on ‘Site Actions’ =>’More Options’.
  • Click create and create a new Document Library ”
  • When the library is created. Click on “Add document”.
  • And upload the Google Map text file you created in the previous step

Your Google Maps HTML code is in SharePoint now.  Next step: display it.

Note 1: An asset might be a more appropiate naming.  So an “Asset Library” might be a better choice. For simplicity sake we stick with a standard “Document Library”
Note 2: Feel free to add your custom content types to the library and fill out out the required meta data.

3. Display the Google Map.

Get the document url :

  • Go the library from the previous step.
  • Click on the Google Maps document you want to display.
  • SharePoint opens this file as plain text in your browser.
  • Copy the link to this file from your browser address bar.

Add the Google Map to a page :

  • Open the a SharePoint page.
  • Edit the page.
  • Add the Content Editor web part
  • Clicking on “Edit Web part” in the web part context menu
  • Insert the document url, of the Google Maps text document, in the “Content Link” box.
  • Click on OK
  • Save the page.
  • If needed check-in and approve the page.

That’s it. Your Google Map is now visible on the SharePoint site.

The nice thing is that you can reuse this map in your SharePoint site. And when the map changes (change of address, etc…) you only need to change the text file in your Document Library.

Regards,
W0ut

7 Comments

  1. Axel

    July 13, 2011

    Great article. If you want to go the next step you could use a great new feature for SharePoint-Lists to show a map with markers which will be set “magically” by a little javascript. See: http://spgooglemapswpforspl.codeplex.com/

  2. Abdul Muqeet

    January 31, 2012

    i tried your article its good , i dint get the map when i add the URL in web part ,,
    i add the code in Edit html Source and it worked..

  3. shajahan

    October 9, 2012

    i try its working man
    nice tricks

  4. dioza22

    October 22, 2012

    Hello there!
    Thanks for the share because it helped me to find an easy way to include google maps in my page. But i meet some problems. After pasting the embeded code, I’ve noticed that the map doesn’t appear in the IE browser (I work with IE9), but works well in Chrome and Firefox.
    Can someone give me a hint to solve this problem?

    Thanks in advance!

    • W0ut

      October 22, 2012

      Does it work when your test it locally (= empty html page on your hard drive and copy past the google map code in there)

  5. dioza22

    October 22, 2012

    No, I created a new empty html file where i pasted the code, but it acts as before. nothing appear! =(

  6. dioza22

    October 22, 2012

    I found a way to solve it, but i am not sure if it is safe! I have added the link of the google maps in the trusted websites in the internet options.

Comments are closed. ×

Share Your Thoughts