Implementation of Google Map in Drupal

Create in 26.03.2010Miyula Zeng, miyula1988@gmail.comXiaoHang Zou, zxhwd19871004@gmail.com

Implementations

Map content•Create your own map•Design and share maps in groupMap display•Display map on homepage•Admin map easily

Location map•Mark all users

MAP CONTENT

Map content

• Map content module provides implementations for all user in Drupal to create their own Google maps as they like.

• What can you do with map content?– Create a map, search and locate the place.– Add markers with various icon selections, info

bubbles. – Marker category functions.

Create your first map• Step 1

Click: Create content -> Google Map Content • Step 2 Search a location

Put an address (e.g. Espoo) on search bar, and click Search

Show the detail address info of current location.

• Step 3 Set basic info.

The system adjusts the map automatically when map basic information is changing.

• Step 4Fine-tune the location on map by dragging the map canvas, changing zoom and map type.

Don’t forget to general new map info

Map canvas size

Center coordinate

Map type:•Normal•Satellite•Hybrid (normal + satellite)

• Step 5 Click Add marker

A new marker will display on map center• Step 6

Placed the marker in a suitable place

• Step 7 - Edit the marker information

Step 6

Step 5

Step 7

• Change the marker typeClick the icon image to change the marker type.

• Save or discard the marker If the users are not satisfied with the marker’s place or

anything else, they can drag or discard the marker.• Add Tab to the marker

Step 7 – Change marker type

Step 7 – input tab name

• Step 8The markers will be displayed on the map

Step 8 - show markers on the map

Step 7 – Edit tab contentStep 7 – Final version

• Step 9Click the marker to get the information, edit or remove.

• Step 10 - Edit the index of markers.

Step 9

Step 10

Step 10The marker index will change when user Add Edit or Remove a marker. User can click the edit button to change the content of the marker. The index is used for explaining the markers on the map.

MAP DISPLAY

Map Display Module

• Map Display module supports functions to design a complex map with multiple ways to show variety information for a web site.

• You don’t need to type any code, you don’t need to know javascript, just configure the setting like other module’s way.

Configure map display module• Step 1 Go： Home » Administer » Site configuration » Home page map settings » Map Setting

• Step 2 Fill in the form

Basic Information Markers list Images list

• Step 4 Click Preview : preview the map Click Save : save map info

Configure map display module – add marker• Step 1 Click tab Add marker

• Step 2 Fill the form

• Step 3 Set icon (3 ways):

– URL link– Upload new image– Select form existing image

GPoint X: x coordinate relative to marker dot GPoint Y: y coordinate relative to marker dot• Step 4 Design on click action:

– No action– Show Google map info window– Show custom info tab– Load a new map

• Step 5 Set on click icon (similar to Step 3)

Configure map display module – add marker

Configure map display module – add marker

Google info window

Information Tab

Load a new map

Add image provide a way to add an unmovable image overlay on the map.• Step 1 Click Home » Administer » Site configuration » Home page map settings » Add image

• Step 2 GPoint X: x coordinate relative to lower-left corner GPoint Y: y coordinate relative to lower-left corner

Configure map display module – add image

LOCATION MAP

Location map module

• Locate all users on map,• Search users by name or address

Locate your location• Step 1 Account > Edit > Location > Add new location

• Step 2 Fill in a location, and search it.

Locate your location• Step 3

Drag the marker to the place you are in. The current location of the markeris showed below the search box• Step 4 Select the country you are in.• Step 5 Fill in the address