Google Maps for Share Point

8/6/2019 Google Maps for Share Point

1/15

for


2/15

INSTALLATION

1. Download the latest version of Google Maps for Sharepoint.

2. Save or copy the file to the Sharepoint server. For this example I have saved the

file to:

C:\googlemaps

3. Open a command prompt on the server and change the directory to the location

ofstsadm.exe - Sharepoint bin directory .

cd "c:\program files\common files\Microsoft Shared\web server extensions\12\bin"

4. Add the solution to the farm using the addsolution command.

stsadm -o addsolution -filename "c:\googlemaps\MJB.Sharepoint.GoogleMaps.wsp"

5. Once the solution has been added it can be deployed.

stsadm -o deploysolution -name MJB.Sharepoint.GoogleMaps.wsp -immediate

-allowgacdeployment -url http://your_server

6. After deploying the solution, the web part needs to be added to the gallery and

this can be done by switching the web part feature on.

stsadm -o activatefeature -name mapswebpart -url http://your_server

7. Optional (MOSS only): Create a list to store your information in. This is activatedat the web level so make sure that you enter the full URL of the site that you are

going to use.

stsadm -o activatefeature -name GoogleMapList -url http://your_server/your_site

And then you can create an instance of the list by activating the

CreateGoogleMapList feature on

stsadm -o activatefeature -name CreateGoogleMapList -url http://your_server/your_site

8. Optional (MOSS only): Add a CSS file to the style library. Once this feature is

activated at site level, this copies a css file to the Style Library in the root of the

site.

stsadm -o activatefeature -name MapsWebPartCSS -url http://your_server

ADDING THE WEB PART

1. Find the page that will have the web part on

2. From the Site Actions menu, choose Edit Page

3. Click Add a Web Part

4. Select the Google Maps Web Part under Miscellaneous


3/15


4/15

GENERAL SETTINGS

1. Click Edit and then Modify Shared Web Part.

2. Enter your Google Maps API Key in text box A

a. If you don't have a Google Maps API Key, you can easily register for one

b. Go to http://code.google.com/apis/maps/signup.html or click on the link

c. Read and make a note of the restrictions on the Google Maps API Key

d. Enter your website address and click Generate API Key

e. Your key should be displayed on the web page and look something like:

ABQIAAAA35PKyQfjC-80rooD2nROYhTGMs9uHoW1GJtY4SFOnZNbLPJidCSReo654RkgzkNgtHTRgMaeIkb9BA

3. Choose the zoom level required - B. There are 17 zoom levels from "Street Level"

to "World Level".

Zoom Level 17Street Level

Zoom Level 14Town / Suburb Level

Zoom Level 11City Level

Zoom Level 8Region Level

A

B

C
http://code.google.com/apis/maps/signup.htmlhttp://code.google.com/apis/maps/signup.html


5/15

Zoom Level 5Country Level

Zoom Level 1World Level

4. Select the Map Type from drop down list C

Map Satellite Hybrid

CSS CLASSES ON THE TOOLPANE

OBTAINING LONGITUDE AND LATITUDE

First a basic Geography lesson!

(I did my degree in Geography before falling into web design so please be patient)

Longitude and Latitude have been calculated since the Phoenicians (600 BC) and

Hipparchus (190 BC). They provide a way of determining where on the Earth you are.

Since 1884, the Greenwich Meridian, which runs through Central London has been used

as the universal zero for longitude and the equator is the zero line for Latitude.

It is easy to get the two mixed up.

.

.

.

.ms-TPHeader div.ms-

.ms-TPBody div.ms-


6/15

Here's how I try to remember it - Longitude is the longest lines and run from top to

bottom whereas latitude lines get smaller. The following grid is helpful for

troubleshooting latitude and longitude.

Negative Longitude Positive LongitudePositive Latitude USA, Canada, Central

America, Most of the UK and

the Atlantic coasts ofEurope and Africa

Most of Europe, Russia,Northern Africa Middle East,

India and Asia

Negative Latitude Most of South America Southern Africa, PacificIslands, Australia and NewZealand

Now back to Sharepoint!

HOW TO GET THE LONGITUDE AND LATITUDE

There are several ways to find the longitude and latitude of a point.

1. Use one of the many on-line sites that allow you to calculate your longitude and

latitude, either by searching for an address or pointing and clicking on a map

For example - Centring the map at http://www.wikimapia.org on your

location allows you to obtain the point's longitude and latitude by hacking /

viewing the URL

2. Use Google Earth or similar to obtain the co-ordinates of a point

3. Most GPS enabled devices can give you a longitude and latitude reading. Forexample, the Nokia N95 with built in GPS can display this. However, be aware

that some hand held GPS devices are accurate to within a few hundred meters.

4. It is possible to buy CDs from postal organisations which contain the longitude

and latitude for each post code.

The longitude and latitude need to be in decimal format. They are sometimes given in

Degree, Minute and Second format. For example:

53 N 34' 51.5028", 2 W 17' 41.7006" converts to 53.580973,

-2.294917
http://www.wikimapia.org/http://www.wikimapia.org/


7/15

There are many on-line calculators which will convert from one format to another. One

example being:

http://www.fcc.gov/mb/audio/bickel/DDDMMSS-decimal.html
http://www.fcc.gov/mb/audio/bickel/DDDMMSS-decimal.htmlhttp://www.fcc.gov/mb/audio/bickel/DDDMMSS-decimal.html


8/15

USING POINTS FROM A LIST

One of the main advantages of this web part over other web parts and solutions that are

available is that this allows more than one point to be plotted on the map and can takethose points from an existing Sharepoint list or from a list created solely for this purpose.

This allows the points on the map to be governed by Content Approval on lists and also

allows Workflows to be associated with the list that holds the points on a map.

COMPOSITION OF THE LIST

Most multi site organisations may already have a list that contains postal addresses,

locations and details about all the sites that they are responsible for and this web part

takes advantage of this. The ideal specification of the list is shown below. If you do not

already have a list with the buildings details in you can create one by activating the

features included in this solution. The steps shown in the introduction will create a blanklist based on the basic definition shown below.

MAKE UP OF THE LIST

While the names of the fields and the content may vary, these are the names given in

this example and the field types chosen by the default installation.

Field Name Field Type Example Content

Title (Created byDefault) *

Text FC United of Manchester

Longitude * Text -1.296370

Latitude * Text 53.580973Description Rich HTML Anything youwantImageURL Text /maps/images/logo.jpg

* - required

NB - If you have the Sharepoint Asset Picker as a default field type then it may be better to use that to format

the ImageURL.

Setting Default Value

Display on Quick Launch NoRequire content approval for submitted Items NoCreate a version each time you edit an item list NoManagement of Content Types NoRead Access All Items

Edit Access All ItemsAttachments DisabledDisplay New Folder NoAllow Items in the search results YesPermissions InheritedWorkflows No Customisation
http://www.google.com/http://www.google.com/


9/15

LINKING THE LIST TO THE WEB PART

1. Load up the Google Maps Web Part Tool Pane by clicking Edit and Modify

Shared Web Part

2. Clicking the Browse button will open the Sharepoint Site Picker.

a. From here, find the list that holds the building information and select it.

b. Clicking OK on the Site Picker will enter the Site name and the List name in

text box D and E respectively

WSS USERS : YOU WILL NEED TO TYPE THE SERVER RELATIVE URL OF THE SITE EG

/SERVICES/MAPS AND THE NAME OF THE LIST EG LOCATIONSLISTINTO THE BOX

3. The page will reload filling the drop down boxes with the field names from the list

4. The drop down lists F, G and H will contain all the fields in the list. There will be

several "internal only" fields, such as Effective Permissions Mask and GUID.

Select the relevant fields to match the descriptions

5. There are two options when it comes to images. The recommended width and

height for images is between 100 and 150 pixels.

F

G

H

D

E


10/15

a. If the list that holds the buildings holds the URLs of images then you can

use drop down list I to link the field in the list.

b. If some or all of the buildings in the list do not have an image associated to

them then a default image, such as a company logo or generic image, can

be used.

i. Click Find to open the Sharepoint Asset Picker

ii. Browse to the file location and select it

iii. Click OK to get the file location to appear in text box J

WSS USERS : YOU WILL NEED TO TYPE THE SERVER RELATIVE URL OF THE

IMAGE EG/IMAGES/LOGO.JPG INTO THE BOX

6. Providing the list has some points already entered, the map can be centred on

one location, such as a company head office or most central location. This can be

selected from drop down list K

7. Check in the page, publish it and the maps should be ready for the world to see.

I

J

K


11/15

USING A SINGLE POINT

1. Click Edit and Modify Shared Web Part

2. Enter the Longitude in text box L

3. Enter the Latitude in text box M

4. Enter the Location's Title in box O

5. Find an image that relates to this location using Sharepoint's Asset Picker, or

enter the URL into box N

WSS USERS : YOU WILL NEED TO TYPE THE SERVER RELATIVE URL OF THE

IMAGE/IMAGES/LOGO.JPG INTO THE BOX

6. The map should be ready to display

L

M

O

N


12/15

DIRECTIONS

Getting directions from this web part is very easy.

1. When using a list

a. Directions to and from one of the sites on the list to another site on the list

b. Directions to and from an address that is typed in

2. When using a single point

a. Directions to and from an address that is typed in

The above example will calculate directions From Hednesford to FC United of

Manchester.

The bold showswhich way thedirections are being

Click here if you want tofind out how to get fromthis point to somewhere

Choose one of theother sites from theSharepoint list to get

directions to this

Enter an address, postalor zip code to getdirections from the

entered location to the


13/15


14/15

DISPLAYING THE MAP AND DIRECTIONS - CSS CLASSES

Css mark-up used in this example

#map

{

float:left;

width:70%;

height:500px;

}

#side_bar

{

float:right;

width:28%;

height:500px;

overflow:scroll;

}

#map

#side_b

#directi


15/15

#directions

{

height:300px;

overflow:scroll;

}

The above CSS mark-up is included in a file called MapsWebPart.css which, when the

MapsWebPartCSS feature is enabled, will be put into the Style Library. It is a ghostable

file. If you require a different CSS Layout then you should either edit the file in the Style

Library or remove the file from the library and add the CSS mark-up to your own custom

CSS style sheet.

Documents

Google Maps for Share Point