Thursday, November 5, 2009

Create a Google Map web part for yout MOSS web site


So you are looking for creating Google Map web part for your MOSS web site, here is the easiest way to achieve this without coding, 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 http://code.google.com/apis/maps/signup.html

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 To :
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" type="text/javascript" mce_src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_GOGGLE_API_KEY_HERE"'>
<'/script'>
<'script src="<'a href=" file="api&v="1&key="ADD_YOUR_GOGGLE_API_KEY_HERE"'>http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_GOGGLE_API_KEY_HERE<'/a'>" mce_src="<'a href="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_GOGGLE_API_KEY_HERE"'>http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_GOGGLE_API_KEY_HERE<'/a'>" 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.

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());

Your Google Map web part is ready to use!!!

Note: Remove every single quote written after < html tag.

No comments:

Post a Comment