SharePoint 2010 Embed Google Map iframe from Superfish List

I needed a solution which pulled Google Map embed code from a SharePoint list.  After Googling everywhere, I decided to use Alexanders Superfish for SharePoint solution and modify it slightly to send each link to an iFrame on the same page.

The Result:

Instructions:

Set up the Superfish drop-down menu built for SharePoint from Alexander Bautz  http://sharepointjavascript.wordpress.com/2011/11/06/superfish-drop-down-menu-buildt-from-a-sharepoint-list/

Once you have followed Alexanders instructions and have the Superfish menu on the page, then you need to embed the html iframe onto the same page the Superfish menu is on.

Using a Content Editor Web Part, place the link to the html file.  The code to the html page is shown below.

<iframe name="_iframe1" src="https://maps.google.com.au/maps?hl=en&ie=UTF8&t=m&ll=-25.335448,135.745076&spn=27.594687,37.353516&z=4&output=embed" width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

So in the code, the src= is the starting map for which your page will load initially.

Next, grab the Embed code from your Google Map page and paste it in a Text file.  The only bit of code you require, is “https://maps.google.com.au/maps?hl=en&amp;ie=UTF8&amp;t=m&amp;ll=-25.335448,135.745076&amp;spn=27.594687,37.353516&amp;z=4&amp;output=embed&#8221; without the talking marks.

In the SuperfishforSharePoint files you have already set up, open up SharePoint Designer 2010 and edit the file “SuperfishForSharePoint.js”.  Edit line 59 and change “_blank” to “_iframe1” which is the name of the iFrame in the code sample above.

Within SharePoint, go to the SuperfishforSharePoint list and go to the List Settings, change the URL column to “multi-line” text only and paste the code from Google Map Embed code containing only the url “https://&#8230;. ;output=embed”

Be sure to tick the “Open in New Window” check box column.

Now your Superfish Menu for SharePoint will display the Google Map in the iframe Content Editor Web Part as shown above.

Any questions, please leave a comment.

Advertisements

Post a Comment

Please log in using one of these methods to post your comment:

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