SharePoint Blogs / SharePoint University
SharePoint Blogs and SharePoint University - all in one place!
Bobby Habib SharePoint & MOSS Blogging Space » Create a Google Map Web Part for Free
Need SharePoint Training? Attend a SharePoint Bootcamp!

Please delete cookies related to sharepointblogs.com and sharepointu.com to resolve login issues!

Create a Google Map Web Part for Free

So you are looking at creating a google map web part for your MOSS web site and for FREE and done in minutes.

 

Well this can be achieved in minutes and you could surprise yourself! There is no special development required to achieve this, just a little bit of HTML, a link out to the web from your MOSS server as the google map api will need to communicate to the google map server and a google API key which you can request from here. The google API key, is a key that will be mailed to you from google, once you have submitted the google api key form, you will need to agree to Google Standard Terms and Conditions and provide the URL of your MOSS site.  

PreReq

1. MOSS Server

2. Goggle API Key

How Too

1. Open a Moss site where you would like to place your Goggle Map web part.

2. Place a Content Editor Web Part in the Page of the site.

3. Edit the content Editor Web Part and in the proerties of this web part open the source editor. Do not use the Rich Text Editor.

4. Copy and paste the folloing code in the sorce editor:

<script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_GOGGLE_API_KEY_HERE" mce_src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_GOGGLE_API_KEY_HERE" type="text/javascript">

</script>

<div id="map" style="width: 400px;height:300px"></div>

<script type="text/javascript">

var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-0.160265, 51.51443), 3);

</script>

5. Apply and OK.

6. And Voila!

There is a good site that will get you the latitude and longitude coordinates of your desired location, that will be used when communicating to the google map server:

http://geo.localsearchmaps.com/?street=45+Oxford+Street&city=London&country=UK

Notice in the above URL you send the Building Number & the street, city, country and the site will return a text page of the latitude and longitude co-ordinates that you can use, for your desired location.

If you want to add scaling and repositioning to your web part then add the following into your code, after the var map = ...... Line:

map.addControl(new GLargeMapControl());

This web part can be achieved in a matter of a few minutes and can save you some money, I have seen companies charging $400.00 for this. Surprise

You can also add mapping markers and Location descriptions into your web part very easily. I will write another post showing this. Stick out tongue 

 

 

Posted 12-05-2007 11:13 AM by bobbyhabib

Comments

Geoff G wrote re: Create a Google Map Web Part for Free
on 12-05-2007 10:23 AM

This isn't working for me. Even with the code supplied when i sign up for an API:

<script src="maps.google.com/maps

     type="text/javascript"></script>

   <script type="text/javascript">

   //<![CDATA[

   function load() {

     if (GBrowserIsCompatible()) {

       var map = new GMap2(document.getElementById("map"));

       map.setCenter(new GLatLng(37.4419, -122.1419), 13);

     }

   }

   //]]>

   </script>

 </head>

 <body onload="load()" onunload="GUnload()">

   <div id="map" style="width: 500px; height: 300px"></div>

 </body>

Geoff G wrote re: Create a Google Map Web Part for Free
on 12-05-2007 10:31 AM

This modified code worked for me with my API (removed the xml ![CDATA[ AND //]] wrapper tags):

<script src="maps.google.com/maps mce_src="maps.google.com/maps type="text/javascript">

</script>

<div id="map" style="width: 400px;height:300px"></div>

<script type="text/javascript">

var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-0.160265, 51.51443), 3);

</script>

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 12-05-2007 10:46 AM

The Reason why this did not work the first time for you Geoff, was because you had the code with the <head> and <body> tag. The CDATA would not have made a difference. I am glad you got it working. :-)

George Leithead wrote re: Create a Google Map Web Part for Free
on 12-06-2007 7:50 AM

Used the same principal for to use for Virtual Earth.  See on my home page www.internetwideworld.com (just now need to add the dynamic JASON code to get my actual location!)

Henry Ong wrote re: Create a Google Map Web Part for Free
on 12-06-2007 4:21 PM

why not use the google map iframe html instead?

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="maps.google.com/maps /><small><a href="maps.google.com/maps style='color:#0000FF;text-align:left'>View Larger Map</a></small>

Links (12/6/2007) « Steve Pietrek’s SharePoint Stuff wrote Links (12/6/2007) &laquo; Steve Pietrek&#8217;s SharePoint Stuff
on 12-06-2007 7:03 PM

Pingback from  Links (12/6/2007) &laquo; Steve Pietrek&#8217;s SharePoint Stuff

Mike Roselius wrote re: Create a Google Map Web Part for Free
on 12-07-2007 9:34 AM

I'm guessing it must make a difference where the site is located.

I am trying to test this on a sharepoint site internally - behind our company firewall.  I'm getting an API from Google for the URL - but since the domain isn't public - does that make a difference?

If I don't put an API in, or have the wrong one - I do get an error message that I need to generate one.  Once I paste the right API in, I don't get the error message any more, but the web part just shows blank space.

Any thoughts?

dlgross wrote re: Create a Google Map Web Part for Free
on 12-08-2007 6:11 PM

Can this be done on a WSS 3.0 server or is MOSS required for some reason?

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 12-09-2007 5:23 PM

No, I quite sure the domain does not need to be a public domain. The key needs to match the web site domain name that the web server is serving the MOSS site. The web server needs internet access as it needs to communicate to the google server. SO make sure you can connect to the internet from your MOSS server. Otherwise this would not work.

Hope this helps. Let me know.

Regards

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 12-09-2007 5:31 PM

Hey dlgross,

This can be done on WSS 3.0. It just using a google api through a web part. using HTML and Javascript. So this could be done on any web server. I have just shown you how you do this within a web part. :-)

Cheers

B

Mel wrote re: Create a Google Map Web Part for Free
on 12-19-2007 5:56 PM

This is the code I have, but it only displays a white  box. (No errors) Any help would be greatly appreciated!  Thanks!

<script src="maps.google.com/maps

mce_src="maps.google.com/maps

type="text/javascript">

</script>

<div id="map" style="width: 400px;height:300px"></div>

<script type="text/javascript">

<![CDATA[

var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-0.160265, 51.51443), 3);

//]]>

</script>

Blog del CIIN wrote WSS 3.0 & MOSS: Recopilación de enlaces interesantes (XII)
on 12-23-2007 4:06 PM

Una vez más, en esta nueva entrega recogemos el recopilatorio de enlaces, recursos y diferentes elementos

google maps wrote google maps
on 12-25-2007 12:04 AM

It is material that you unearth the number one websites.

Chris wrote re: Create a Google Map Web Part for Free
on 01-04-2008 5:27 AM

Does anyone know a work around to get the map to center correctly??  mine seems to be putting the center in the top left and any google search for normal sites does not work..

Anyone help??

Dave wrote re: Create a Google Map Web Part for Free
on 01-19-2008 12:46 PM

I would like to include this within an https site and get the message you are trying to display non-secure items in a secure site,

Any suggestions to sort this out?

inquiringminds wrote re: Create a Google Map Web Part for Free
on 01-31-2008 10:41 AM

Would like this to wrok but alas for me it is not.

Have the API key, used your code above and inserted the key in the 2 places it asks for.

servers are load balanced and secured domainqa.company.com/sites registered with the API.

target site is 1 below "sites/"

Content editor web part shows blank regardless if I use your code or googles.

thoughts?

Clif L - UK wrote re: Create a Google Map Web Part for Free
on 02-14-2008 10:42 AM

Hi there,

This is great - and thanks for posting it.  :)

I know that google maps now has an 'Add Content' bit so you can add your own content to your saved maps.

Do you have any ideas on how I could add my own content to the map now created within Sharepoint WSS 3.0?

My idea is to have a SQL database holding services linked to postcodes, and attach this to the map in some way. This allows a user to enter a postcode, the map would change to show the area linked to the postcode, and also read the database to display the range of services attached to the postcode...

Any ideas on this one?

Thanks!

Regards,

Clif.

milo wrote re: Create a Google Map Web Part for Free
on 02-19-2008 1:59 AM

Is it also possible to add this in a wiki page? or even combine this with a wiki? I want to add event infomation on our intranet.

Xico wrote re: Create a Google Map Web Part for Free
on 02-19-2008 5:34 AM

Your code and google code doens´t work for me. The content editor webpart appears blank...

Edwin wrote re: Create a Google Map Web Part for Free
on 02-22-2008 11:54 AM

Hi Bobby,

Thanks for the great into. Found your blog on a google search trying to solve my problem. When copy and pasting my code into the Source Editor, nothing but my static html shows up.  Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "www.w3.org/.../xhtml1-strict.dtd">

<html xmlns="www.w3.org/.../xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">

 <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

   <title>Drayer Physical Therapy Institute</title>

   <script src="maps.google.com/maps      type="text/javascript"></script>

   <style type="text/css">

     body {

       font-family: Verdana, Arial, sans serif;

       font-size: 11px;

       margin: 2px;

     }

     table.directions th {

background-color:#EEEEEE;

     }

     img {

       color: #000000;

     }

   </style>

   <script type="text/javascript">

   var map;

   var gdir;

   var geocoder = null;

   var addressMarker;

   function initialize() {

     if (GBrowserIsCompatible()) {      

       map = new GMap2(document.getElementById("map_canvas"));

       gdir = new GDirections(map, document.getElementById("directions"));

       GEvent.addListener(gdir, "load", onGDirectionsLoad);

       GEvent.addListener(gdir, "error", handleErrors);

       setDirections("8205 Presidents Drive Hummelstown, PA 17036", "3200 Pleasant Valley Blvd. Altoona, PA  16602", "en_US");

     }

   }

   function setDirections(fromAddress, toAddress, locale) {

     gdir.load("from: " + fromAddress + " to: " + toAddress,

               { "locale": locale });

   }

   function handleErrors(){

  if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

    alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

  else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)

    alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

  else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)

    alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

//   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong

//     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

  else if (gdir.getStatus().code == G_GEO_BAD_KEY)

    alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

  else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)

    alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

  else alert("An unknown error occurred.");

}

function onGDirectionsLoad(){

     // Use this function to access information about the latest load()

     // results.

     // e.g.

     // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;

 // and yada yada yada...

}

   </script>

 </head>

 <body onload="initialize()" onunload="GUnload()">

 <h2>Directions from Drayer Corporate to Altoona Clinic</h2>

   <br/>

   <table class="directions">

   <tr><th>Formatted Directions</th><th>Map</th></tr>

   <tr>

   <td valign="top"><div id="directions" style="width: 275px"></div></td>

   <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

   </tr>

   </table>

 </body>

</html>

Sheng Koh wrote re: Create a Google Map Web Part for Free
on 03-04-2008 8:46 PM

Hi all

I have my MOSS2007 setup in a Virtual PC and behind our company firewall (so not available on the internet).  

After I paste these lines of code into the Content Editor Web Part, clicked "Apply or Ok", it just shows blank space.

<script src="maps.google.com/maps

      type="text/javascript"></script>

   <div id="map" style="width: 500px; height: 300px"></div>

   <script type="text/javascript">

        //<![CDATA[

       if (GBrowserIsCompatible())

            {

            var map = new GMap2(document.getElementById("map"));

           map.setCenter(new GLatLng(37.4419, -122.1419), 13);

            }

        //]]>

   </script>

After  removing the tags,  //<![CDATA] ,

clicked "Apply or Ok", it works but only half of the map is shown and the rest of the div are grey out. Not quite sure what am I missing here.

Anyway at least it works. I will have a look at the API to see what is causing the half drawn map.

Good explanation

RatZ wrote re: Create a Google Map Web Part for Free
on 03-14-2008 10:03 AM

I've got it to work. My googlemap connects to a sharepoint list and gets information from it.

With this information the googlemap creates new POI's on the map.

But i'm having a small problem with my googlemap in IE. The googlemaps displays funny. I'm only having a clear view of the map in the upper left corner.

I don't know why i'm having this problem. If i use the googlemap outside a webpart, i don't have this problem.

Also, when using it inside a web part, but instead of IE i'm using firefox, this isue is solved.

Are there any solutions for this, or is there anyone with the same problem?

Thnx

Aassim wrote re: Create a Google Map Web Part for Free
on 03-18-2008 10:30 AM

This just saved my ass 400 bucks :)

thanks 4 sharing

Yamanb wrote re: Create a Google Map Web Part for Free
on 03-26-2008 11:38 AM

RatZ

Can you briefly explain how you got the Google Map API to integate with a SharePoint list?

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 03-27-2008 6:39 AM

I have just started writing this article, will make it available in the next week. :-)

I have been out of action for a while with regards to blogging - My apologise. I am back with a vengence to provide a wealth of info. :o)

Uma wrote re: Create a Google Map Web Part for Free
on 04-02-2008 12:31 AM

What does getElementById("Maps") , specifies?

what should be  the value of "Maps"?

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 04-03-2008 12:18 PM

Hi Uma,

The getElementById("Maps") is the little bit of JavaScript that references your HTML div tag, you may have noticed that the div tag ID is equal to "Maps". So you do not really need to define the value as this should be there in the HTML. If you changed the id of the Div tag then the getElementId("xxxx") will change to the id you have set it too. :-)

Uma wrote re: Create a Google Map Web Part for Free
on 04-09-2008 1:27 AM

Hi,

i am not able to see the map, It shows me the blank content editor. But on other site it shows me the only background of map, not actual map. Is this happens becouse of sharepoint version or anything else?

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 04-09-2008 6:21 AM

Do you have internet access from the Web Front End Server? Test this by going to google maps

maps.google.co.uk/maps

Also remove the <![CDATA[ and //]]> tags.

From the blog some users have removed the CDATA tags and this has worked for some.

Uma wrote re: Create a Google Map Web Part for Free
on 04-10-2008 5:42 AM

Yes  i have internet access from Web front End Server and also i have removed <![CDATA[ and //]] tags from code. Now it is working fine . Thanks !!!

Also Now i want to access locations from sharepoint list rather than directly through javascript , is it possible? Give me some way to access list in content editor.

Uma wrote re: Create a Google Map Web Part for Free
on 04-10-2008 5:46 AM

Thanks.

Now I want to access locations from sharepoint list not through javascript directly. Is it possible to access list through content editor web part?

bobbyhabib wrote re: Create a Google Map Web Part for Free
on 04-10-2008 11:30 AM

Hey good stuff Uma :-)

I have taken the cdata out of the code above.

I am in the middle of doing a blog for locations from a sharepoint list. Will be posting very soon. :-)

Jose wrote re: Create a Google Map Web Part for Free
on 04-23-2008 10:54 AM

Hello there

I was wondering if someone can give me a hand

I am doing this site on xml and xsl and i can't get the google map to work in explorer.

I put this in my head tags

      <xsl:text disable-output-escaping="yes">

      &lt;script src="maps.google.com/maps

     type="text/javascript"&gt;&lt;/script&gt;

      &lt;script type="text/javascript">

   //&lt;![CDATA[

   function load() {

     if (GBrowserIsCompatible()) {

       var map = new GMap2(document.getElementById("map"));

       map.setCenter(new GLatLng(37.4419, -122.1419), 13);

     }

   }

   //]]&gt;

   &lt;/scrip&gt;

   </xsl:text>

<body onload="load()" onunload="GUnload()">

<div id="map">

       <xsl:text disable-output-escaping="yes">

&lt;iframe width="954" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="maps.google.co.uk/maps

   </xsl:text>  

In FF i get it to work but i get an error "Load is not defined"

Explorer doesn't display anything at all....

Any ideas?

Cheers

goggle maps wrote goggle maps
on 04-27-2008 10:41 AM

Pingback from  goggle maps

goggle maps wrote goggle maps
on 05-11-2008 6:43 AM

Pingback from  goggle maps

aasoftech wrote re: Create a Google Map Web Part for Free
on 05-27-2008 10:51 AM

This is a sample of a customized Sharepoint page so as to get data from a Sharepoint Contact List and show it on Google Maps.

www.sharepointmall.com/.../googlemaps.aspx

decoster wrote re: Create a Google Map Web Part for Free
on 06-07-2008 4:39 PM

Hi,

     My company wants to display a click-able map with some of the company information on it ....how can i do it in MOSS 2007 and the best example for what i want to achieve is  the map which is on this link www.nrai.com/nraiLocations.aspx

Thanks

Decoster...

Ricky Singh wrote re: Create a Google Map Web Part for Free
on 06-09-2008 9:00 AM

How do i get the API Key?? Where is the form that i have to fill for the terms and conditions?? if anyone can provide me that link, that would be great.

Ricky Singh wrote re: Create a Google Map Web Part for Free
on 06-09-2008 9:58 AM

i got the API and its working but I want to show the map from JFK airport to Manhattan, so i think i have to change the Gpoint.

var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-0.160265, 51.51443), 3);

What valules should i use or from where i will get those values.

Ricky Singh wrote re: Create a Google Map Web Part for Free
on 06-09-2008 9:58 AM

i got the API and its working but I want to show the map from JFK airport to Manhattan, so i think i have to change the Gpoint.

var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-0.160265, 51.51443), 3);

What valules should i use or from where i will get those values.

Paul Morris wrote re: Create a Google Map Web Part for Free
on 06-20-2008 6:02 AM

The left upper corner map only issue seems to be resolved in IE with the following mod:

<div id="map"></div>

var map = new GMap2(document.getElementById("map"), {size:new GSize(400,300)});

Continues to work in Firefox and Safari also

Matt L wrote re: Create a Google Map Web Part for Free
on 06-25-2008 11:10 AM

Bearing in mind I know nothing about java stuff, I've got this cobbled together (with help from above comments) and it seems to SOLVE THE left-upper problem, which Paul Morris' comment didn't, for me.

<script src="maps.google.com/maps mce_src="maps.google.com/maps type="text/javascript">

</script>

<script type="text/javascript">

function load() {

 var map = new GMap(document.getElementById("map"));

 map.centerAndZoom(new GPoint(-0.160265, 51.51443), 3);}

</script>

<div id="map" style="width: 300px;height:300px"></div>

<script type="text/javascript">

 window.onload = load;

</script>

Ashish wrote re: Create a Google Map Web Part for Free
on 06-26-2008 5:42 PM

Hello

Can you tell me how do I pass paramater of longitude and

latitude paramater? As theese map I am using in dispform.aspx so my variable is coming in xslt.

Any idea

Ani

free antivirus software wrote free antivirus software
on 06-29-2008 5:18 AM

For even more good info like this take a look at the free info on software and all kinds of free antivirus stuff.

Matt Lancashire wrote re: Create a Google Map Web Part for Free
on 07-01-2008 4:31 AM

Through hashing together a variety of the results above (thank you all), I've finally got it working!

<script src="maps.google.com/maps mce_src="maps.google.com/maps type="text/javascript">

</script>

<script type="text/javascript">

function load() {

function createMarker(point,html) {

 var marker = new GMarker(point);

   GEvent.addListener(marker, "click", function() {

     marker.openInfoWindowHtml(html);

     });

   return marker;

 }

var map = new GMap2(document.getElementById("map"));

     map.addControl(new GSmallMapControl());

     map.setCenter(new GLatLng(51.518197, -0.188338),12);

var point = new GLatLng(51.518192, -0.188335);

 var marker = createMarker(point,'Home')

     map.addOverlay(marker);

 }

</script>

<div id="map" style="width: 300px;height:300px"></div>

<script type="text/javascript">

 window.onload = load;

</script>

Mac-Attack wrote re: Create a Google Map Web Part for Free
on 07-07-2008 3:24 PM

Habib.. stop teasing us! where is the tutorial on linking MOSS lists into google maps

Mike wrote re: Create a Google Map Web Part for Free
on 07-07-2008 6:49 PM

How is the blog post concerning connecting to SharePoint lists progressing?   I could really use it right now…

Internet Security wrote Internet Security
on 07-17-2008 9:26 AM

If your looking for even more information on PC security then I would head over here as they have plenty of stuff on identity theft, antivirus software etc.

Google Maps and MOSS « Sanket Shah’s Weblog wrote Google Maps and MOSS &laquo; Sanket Shah&#8217;s Weblog
on 09-22-2008 6:46 PM

Pingback from  Google Maps and MOSS &laquo; Sanket Shah&#8217;s Weblog

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Need SharePoint Training? Attend a SharePoint Bootcamp!
Posts (c) their respective authors. Everything else (c) 2009 SharePoint Experts, Inc.