Implementation of Google Map in Drupal

Implementation of Google Map in Drupal Create in 26.03.2010 MiyulaZeng, miyula1988@gmail.com XiaoHangZou, zxhwd19871004@gmail.com

Implementations

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.

Map canvas size • Step 3 Set basic info. The system adjusts the map automatically when map basic information is changing. • 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 Center coordinate • Map type: • Normal • Satellite • Hybrid (normal + satellite)

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 7

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 – input tab name Step 7 – Change marker type

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

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

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

Configure map display module – add marker • 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 Google info window Information Tab Load a new map

Configure map display module – add image 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

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 marker is showed below the search box • Step 4 Select the country you are in. • Step 5 Fill in the address

Implementation of Google Map in Drupal