1. Implementation of Google Map in Drupal Create in 26.03.2010 Miyula Zeng, miyula1988@gmail.commiyula1988@gmail.com XiaoHang Zou, zxhwd19871004@gmail.comzxhwd19871004@gmail.com

2. Implementations Map content Create your own map Design and share maps in group Map display Display map on homepage Admin map easily Location map Mark all users

3. MAP CONTENT

4. 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.

5. Create your first map Step 1 Step 1 Click: Create content -> Google Map Content Step 2 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.

6. Step 3 Step 3 Set basic info. The system adjusts the map automatically when map basic information is changing. Step 4 Step 4 Fine-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)

7. Step 5 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

8. Change the marker type Click 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

9. Step 8 The markers will be displayed on the map Step 8 - show markers on the map Step 7 – Edit tab content Step 7 – Final version

10. Step 9 Click the marker to get the information, edit or remove. Step 10 - Edit the index of markers. Step 9 Step 10 The 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.

11. MAP DISPLAY

12. 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.

13. Configure map display module Step 1 Step 1 Go ： Home » Administer » Site configuration » Home page map settings » Map Setting Step 2 Step 2 Fill in the form Basic InformationMarkers listImages list

14. Step 4 Step 4 Click Preview : preview the map Click Save : save map info

15. Configure map display module – add marker Step 1 Step 1 Click tab Add marker Step 2 Step 2 Fill the form

16. Step 3 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 Step 4 Design on click action: – No action – Show Google map info window – Show custom info tab – Load a new map Step 5 Step 5 Set on click icon (similar to Step 3) Configure map display module – add marker

17. Google info window Information Tab Load a new map

18. Add image provide a way to add an unmovable image overlay on the map. Step 1 Step 1 Click Home » Administer » Site configuration » Home page map settings » Add image Step 2 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

19. LOCATION MAP

20. Location map module Locate all users on map, Search users by name or address

21. Locate your location Step 1 Account > Edit > Location > Add new location Step 2 Fill in a location, and search it.

22. Locate your location Step 3 Drag the marker to the place you are in. The current location of the marker is showed below the search box Step 4 Select the country you are in. Step 5 Fill in the address