Implementation of Google Map in Drupal
Create in 26.03.2010Miyula Zeng, [email protected] Zou, [email protected]
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
Top Related