wp plugin manual june 2014
DESCRIPTION
k;kklTRANSCRIPT
WP Google Map Pro User Guide
Advanced Google Maps Plugin for WordPress
FlipperCode USER GUIDE
©2013-2014 Copyrights Reserved FlipperCode
WP Google Map Pro
wplocker.com
WP Google Map Pro User Guide
About User Documentation Version 1.O
Product Copyright © FipperCode
The FipperCode and its documentation are protected by copyright law and international
treaties. Unauthorized reproduction or distribution of this program, or any portion of it, may
result in severe civil and criminal penalties, and will be prosecuted to the maximum extent
possible under the law. The products described in this document are furnished under license
agreement by FipperCode. The information contained in this document is subject to change
without notice. Although every effort is made to update documentation in a timely manner,
FipperCode does not assume responsibility for the accuracy of the information presented.
Companies, names and/or data used in screens and sample output are fictitious unless
otherwise noted. All trademarks are the property of their respective owners.
Document Purpose
The purpose of this document is to help you to understand the FlipperCode product, WP
Google Map Pro and provides you the easy and best ways to utilize the potentials of the
product to the maximum.
Audience
This document is written for all users and support members who work and use WP Google Map
Pro.
Relevant URLs
Name URL
FipperCode Site www.flippercode.com
Support [email protected]
wplocker.com
WP Google Map Pro User Guide
Contents 1. Getting Started...................................................................................................................................... 6
1.1 Overview .......................................................................................................................................... 6
1.2 Features & Benefits ...................................................................................................................... 6
1.3 Installing WP Google Map Pro Plugin .................................................................................. 7
1.4 Activating the Plugin ................................................................................................................... 9
1.5 Support ............................................................................................................................................ 9
1.6 Logging Out ................................................................................................................................. 10
2. Using the Plugin ................................................................................................................................. 11
2.1 Finding the Plugin ...................................................................................................................... 11
2.2 Adding a Location ...................................................................................................................... 11
2.3 Quickly Creating a Location .................................................................................................... 13
2.4 Managing Locations .................................................................................................................. 16
2.4.1 Editing a Location ................................................................................................................... 16
2.4.2 Deleting a Location ................................................................................................................ 19
2.4.3 Exporting Locations ............................................................................................................... 20
2.5 Importing Locations .................................................................................................................. 21
2.6 Creating a Map ............................................................................................................................ 23
2.7 Managing Maps .......................................................................................................................... 39
2.7.1 Editing a Map ........................................................................................................................... 40
2.7.2 Deleting a Map ........................................................................................................................ 41
2.8 Drawing on a Map...................................................................................................................... 42
2.9 Adding a Marker Category...................................................................................................... 44
2.10 Managing Marker Categories ................................................................................................ 45
2.10.1 Editing a Marker Category .................................................................................................. 46
2.10.2 Deleting a Marker Category ............................................................................................... 47
2.11 Adding Route ............................................................................................................................... 48
wplocker.com
WP Google Map Pro User Guide
2.12 Manage Routes ........................................................................................................................... 51
2.12.1 Editing a Route ........................................................................................................................ 52
2.12.2 Deleting a Route ..................................................................................................................... 56
2.13 Configuring Google WP Map Pro Settings ....................................................................... 56
2.14 Using Shortcodes ....................................................................................................................... 58
2.15 Displaying Map Using Address ............................................................................................. 60
2.16 Displaying Map in a Post /Page ............................................................................................ 61
2.17 Displaying Map in Sidebar ...................................................................................................... 63
3. LIVE EXAMPLES ................................................................................................................................... 67
3.1 100% Responsive Google Map .............................................................................................. 67
3.2 Filter Locations by Categories ................................................................................................ 68
3.3 Styled Google Map Skins ......................................................................................................... 68
3.4 Google Map Street View .......................................................................................................... 69
3.5 Google Map Weather Layer .................................................................................................... 70
3.6 Google Map Transit Layer ............................................. Error! Bookmark not defined.
3.7 Google Map Traffic Layer ........................................................................................................ 72
3.8 Google Map Bicycling Layer ................................................................................................... 73
3.9 Google Map Panoramic Layer ............................................................................................... 74
3.10 Google Map Overlays using WordPress Plugin ............................................................... 75
3.11 Google Map Satellite with Overlays .................................................................................... 76
3.12 Google Map 45 degree Imagery ........................................................................................... 77
3.13 Google Map without 45 degree Imagery .......................................................................... 78
3.14 Turn Off Scrolling Wheel on Google Map ......................................................................... 79
3.15 Enable Visual Refresh on Google Map using WordPress Plugin ............................... 80
3.16 Google Map Marker Cluster ................................................................................................... 81
3.17 Google Map KML Layers using WordPress Plugin ......................................................... 82
3.18 Display Polygons on Google Map ........................................................................................ 83
3.19 Display Polylines on Google Map ......................................................................................... 84
wplocker.com
WP Google Map Pro User Guide
3.20 Display Route Direction on Google Map ........................................................................... 85
3.21 Remove Controls on Google Map .............................. Error! Bookmark not defined.
3.22 Location Listings on Google Map ......................................................................................... 86
3.23 Customize Info Window on Google Map ................ Error! Bookmark not defined.
3.24 Geolocation Testing on Google Map ........................ Error! Bookmark not defined.
wplocker.com
WP Google Map Pro User Guide
1. Getting Started
1.1 Overview
WP Google Map Pro is a complete plugin for WordPress that allows you to create very useful
Google Maps. It is incredibly easy to use and packed with lots of essential features. You can
create simple street view maps to the complex weather maps with marker clusters and overlays.
You can use custom skins and create unlimited maps for unlimited locations in multiple
languages.
This User Guide helps you to understand WP Google Map Pro and provides you the easy and
best ways to work with WP Google Map Pro. You will be able to understand the basics quickly
and you will also find that the plugin is very easy to use. If you still have questions, don’t worry!
We are always there to assist you. Contact our technical support team.
1.2 Features & Benefits
Compatible plugin for all standard browsers;
Use incredibly simple and intuitive interface;
Create unlimited maps for unlimited locations;
Easily add visually appealing maps to posts/pages/contact forms/sidebars;
Completely customized skins;
Use 500+ readymade markers;
Avail support of multiple info windows with title;
Display traffic real time conditions and overlays;
Use panoramic photos as layer;
Use any language map;
Customized polygons/polylines;
Export or import features;
Use searchable/paginated location listing;
Easily provide directions and route suggestions;
Add nearby locations based on user’s current location;
Reduced time, cost and effort;
wplocker.com
WP Google Map Pro User Guide
1.3 Installing WP Google Map Pro Plugin
To install WP Google Map Pro plugin, follow the steps given below.
1. On your WP account, navigate to Plugins section.
The Plugins page will be displayed.
2. To install the WP Google Map Pro plugin, click the Add New button.
The Install Plugins page will be displayed.
3. Navigate the Upload tab.
Click Add New
wplocker.com
WP Google Map Pro User Guide
The Upload section of the Install Plugins page will be displayed.
4. Click the Browse button to upload the zip version of the plugin from your computer.
The standard File Upload dialog will be displayed.
5. Select the zipped file of WP Google Map Pro plugin from your computer.
6. Click the Open button.
The file will be uploaded.
Click Install Now 5
Click Open
6
wplocker.com
WP Google Map Pro User Guide
7. Click the Install Now button.
The WP Google Map Pro plugin will be installed.
1.4 Activating the Plugin
To activate the WP Google Map Pro plugin, follow the steps given below.
1. Navigate to Plugins-> Installed Plugins.
The installed plugins page will be displayed.
2. Enter the search keyword as WP Google Map Pro in the search text entry box to the right.
3. Click the Search Installed Plugins button.
The WP Google Map Pro plugin will be displayed.
4. Check the box to select that plugin.
5. Click the Network Activate option to activate the plugin.
The WP Google Map Pro plugin will now be activated.
1.5 Support
For any questions or technical issues, you can contact us. Here are our contact details.
E-mail: [email protected]
Click Search Installed Plugins
2
wplocker.com
WP Google Map Pro User Guide
1.6 Logging Out
1. To log out of WordPress, click the Logout option from the user name menu in the topmost
right corner of the screen.
You will be logged out of WP application.
Click Logout
wplocker.com
WP Google Map Pro User Guide
2. Using the Plugin
2.1 Finding the Plugin
1. On your WP admin page, locate the WP Google Map Pro plugin in the left section.
The options within the WP Google Map Pro plugin will be expanded. You can explore the
options within the plugin.
2.2 Adding a Location
To add a location, follow the steps given below.
1. Navigate to the WP Google Map -> Add Location.
wplocker.com
WP Google Map Pro User Guide
The Add Location screen will be displayed.
It has the following fields.
Field Description Example
Location Title Refers to the name of the location. Fynsvej v Slø
Address Refers to the full address of the location. The
Geocode button allows Google to recognize
this address. If the address is recognized, then
the plugin will automatically retrieve the
corresponding latitudes and longitudes for the
location. You can also fill the values manually.
Fynsvej, Kolding,
Denmark
Click Save Location
2
6
7 8
9
3 4
5
wplocker.com
WP Google Map Pro User Guide
Message Refers to an info window message as additional
information of your location.
---------
Draggable Specifies whether your website/blog visitors
can move the marker location from one
position to another or not.
Checked
Disable Info
window
Specifies whether you can disable the display of
info windows or not.
Un-Checked
Choose Marker
Image
Refers to the marker image from the groups in
order to represent your new location in the
Google map.
Google Maps
2. Enter the name of the new location in the Location Title text entry box.
3. Enter the full address of the location in the Address text entry box.
4. Click the Geocode button to allow the Google to recognize the address. If Google
recognizes this address, then the plugin will automatically retrieve the corresponding
latitudes and longitudes for the location. Or else enter the latitude value manually in the
Latitude text entry box.
5. Similarly, enter the longitude value of the location in the Longitude text entry box.
6. Enter the info window message as additional information of your location in the Message
text entry box.
7. Specify whether your website/blog visitors can move the marker location from one position
to another or not by checking or un-checking the box in the Draggable field.
8. Specify whether you can disable the display of info windows or not by checking or un-
checking the box in the Disable Info Window field.
9. Select a marker image from the groups in order to represent your new location in the
Google map from the Choose Marker Image drop down list. The available options are
Google Maps, Select Group, Group Latest and Famous Places.
10. Click the Save Location button.
The new location will be saved.
2.3 Quickly Creating a Location
To quickly create a location, follow the steps given below.
1. Navigate to the WP Google Map -> Quick Locations.
The Quick Locations screen will be displayed.
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
Enter Title Refers to the name or title of the
location.
Ayer
Enter Message Refers to an info window message
to provide additional information of
the location.
Ayer information
Draggable Specify whether your website/blog
visitors can move the marker
location from one position to
another or not.
Checked
Disable Info window Specifies whether you can disable
the display of info windows or not.
Un-Checked
2
6
7
3
4
5
Click Add Marker
wplocker.com
WP Google Map Pro User Guide
Choose Marker Group Refers to the marker group from the
groups in order to represent your
new location in the Google map.
Google Maps
Note: This is a ready-to-use option to quickly create locations on map.
2. Click the correct position on the map at which you wish to create location.
The location dialog box will be displayed.
3. Enter the title of the location in the Enter Title text entry box.
4. Enter the message to be displayed on the info window message as additional information of
your location in the Message text entry box.
5. Specify whether your website/blog visitors can move the marker location from one position
to another or not by checking or un-checking the box in the Draggable field.
6. Specify whether you can disable the display of info windows or not by checking or un-
checking the box in the Disable Info Window field.
7. Select a marker group from the groups in order to represent your new location in the
Google map from the Choose Marker Group drop down list.
8. Click the Add Marker button.
The message box informing you about the successful saving of the new location marker on your
Google map will be displayed.
9. Click the OK button.
The new quick location will be added.
Click OK
wplocker.com
WP Google Map Pro User Guide
2.4 Managing Locations
To manage locations, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Locations.
The Manage Locations screen will be displayed.
From here you can edit, delete and exporting the record. For more information refer to the
following sections.
Editing a Location
Deleting a Location
Exporting Locations
2.4.1 Editing a Location
To edit a location, follow the steps given below.
wplocker.com
WP Google Map Pro User Guide
1. Navigate to the WP Google Map -> Manage Locations.
The Manage Locations screen will be displayed.
2. Check the box in the location row that you wish to edit.
3. Click the Edit button.
The details of the selected record will be displayed in edit mode.
2
Click Edit
wplocker.com
WP Google Map Pro User Guide
4. Edit the name of your new location in the Location Title text entry box.
5. Edit the full address of the location in the Address text entry box.
6. Click the Geocode button to allow the Google to recognize the address. If Google
recognizes this address, then the plugin will automatically retrieve the corresponding
latitudes and longitudes for the location. Or else edit the latitude value manually in the
Latitude text entry box.
7. Similarly, edit the longitude value of the location in the Longitude text entry box.
8. Edit the info window message as additional information of your location in the Message text
entry box.
9. Specify whether your website/blog visitors can move the marker location from one position
to another or not by checking or un-checking the box in the Draggable field.
Click Update Locations
4
6
7
8
9
10
11
5
wplocker.com
WP Google Map Pro User Guide
10. Specify whether you can disable the display of info windows or not by checking or un-
checking the box in the Disable Info Window field.
11. Select a marker image from the groups in order to represent your new location in the
Google map from the Choose Marker Image drop down list. The available options are
Google Maps, Select Group, Group Latest and Famous Places.
12. Click the Update Locations button.
The changes made to the selected location will be updated.
2.4.2 Deleting a Location
To delete a location, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Locations.
The Manage Locations screen will be displayed.
2. Check the box in the row that you wish to delete.
3. Click the Delete button.
2
Click Delete
wplocker.com
WP Google Map Pro User Guide
The selected location will be deleted.
2.4.3 Exporting Locations
To export a location, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Locations.
The Manage Locations screen will be displayed.
Note: You can export all the location records to CSV, XML, JSON and Excel formats.
2. Select the required format from the drop down list above the list of existing locations. The
available formats are Export CSV, Export XML, Export EXCEL and Export JSON. In this
example, the location records are exported to EXCEL format.
3. Click the Apply button.
The standard Save dialog will be displayed. Save the file to the computer.
The selected locations will be exported to Excel format.
2 Click Apply
wplocker.com
WP Google Map Pro User Guide
2.5 Importing Locations
To import locations follow the steps given below.
1. Navigate to the WP Google Map -> Import Locations.
The Import Locations screen will be displayed.
2 Click Import
Locations
wplocker.com
WP Google Map Pro User Guide
2. Click the Browse button in the field to select the required file from the computer.
The standard dialog will be displayed.
3. Select the file that you wish to import, from your computer.
4. Click the Open button.
The selected file will be successfully uploaded.
5. Click the Import Locations button.
The selected file will be successfully imported.
Click Open
3
wplocker.com
WP Google Map Pro User Guide
2.6 Creating a Map
Creating a map is very easy. Simply follow the steps given below.
1. Navigate to the WP Google Map -> Create Map.
The Create Map screen will be displayed.
2
3
4
5
6
wplocker.com
WP Google Map Pro User Guide
The Create Map page has the following fields.
Field Description Example
Map Title Refers to the title of the map in your blog/ website. Chruches
Map Width Refers to the width of the map. 600
Map Height Refers to the height of the map. 500
Map Zoom Level Refers to the various zooming levels of map from 1 to 19. 11
Center Latitude Refers to the central latitude for the map. ---------
2. Enter the title of the map in the Map Title text entry box.
3. Enter the width of the map in the Map Width text entry box.
4. Enter the height of the map in the Map Height text entry box.
5. Select the zoom level of the map from the Map Zoom Level text entry box.
6. Enter the center latitude of the map in the Center Latitude text entry box.
Scroll down to more options.
7
8
9
10
11
13
12
14
15
wplocker.com
WP Google Map Pro User Guide
Additional fields on the Create Map page are given below.
Field Description Example
Center Longitude Refers to the central longitude of Google map. ---------
Choose Map Type Refers to the style of the map. The available
types are roadmap, satellite, hybrid, and terrain.
ROADMAP
Center by Nearest
Location
Specifies whether this location can be set to
center by nearest location or not.
Un-Checked
Turn Off Scrolling
Wheel
Specifies whether the scrolling wheel function
can be disabled or not. By default, Google Maps
are enabled to zoom in and zoom out the map
with mouse scrolls.
Un-Checked
Map Draggable Specifies whether the user can move the map to
a different location or not.
Un-Checked
Enable Visual
Refresh
Specifies whether to give a fresh style to your
Google maps or not. It includes giving new look
to base map tiles, markers, infowindows, and
controls keeping all the functionalities same.
Un-Checked
45° Imagery Specifies whether your satellite/hybrid map
alters its perspective views for 45° imagery
supported locations or not.
Un-Checked
Infowindow Open Specifies whether infowindow is open or not by
default.
Un-Checked
Choose Locations Specifies whether the user can choose a location
or not.
Group Latest
7. Enter the center longitude of Google map in the Center Longitude text entry box.
8. Select the style of the map from the Choose Map Type drop down list. The available
options are ROADMAP, SATELLITE, HIBRID and TERRAIN.
9. Specify whether this location can be set to center by nearest location or not by checking or
un-checking the Center by Nearest Location field.
10. Specify whether the scrolling wheel function can be disabled or not by checking or un-
checking the Turn Off Scrolling Wheel field. By default, Google Maps are enabled to zoom
in and zoom out the map with mouse scrolls.
11. Specify whether the user can move the map to a different location or not by checking or un-
checking the Map Draggable field.
12. Specify whether to give a fresh style to your Google maps or not by checking or un-checking
the Enable Visual Refresh field. It includes giving new look to base map tiles, markers,
infowindows, and controls keeping all the functionalities same.
wplocker.com
WP Google Map Pro User Guide
13. Specify whether your satellite/hybrid map alters its perspective views for 45° imagery
supported locations or not by checking or un-checking the 45° Imagery field.
14. Specify whether infowindow is open or not by default by checking or un-checking the
Infowindow Open field.
15. Specify whether the user can choose a location or not by checking or un-checking the
Choose Locations field.
Scroll down to more options.
16
17
18
21
22
23
24
20
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
KML Layers Specifies whether the KML layers to display the
geographic information given by the KML link be
enabled or not. The KML link can be entered in a
field that will be generated when you enable the
check box.
Un-Checked
Fusion Table
Layers
Specifies whether the fusion table layers can be
activated or not. If checked, enter the key in the
select field and table name in the from field. This
will generate a shortcode next to your map in the
Manage Maps list. Paste the shortcode in your
page/post to display your map with its
corresponding locations and their detailed
information.
Un-Checked
Traffic Layers Specifies whether the traffic layers can be
represented on your Google map or not. This layer
displays real time traffic conditions of supported
locations.
Un-Checked
Transit Layers Specifies whether the transit layers can be viewed
on Google maps or not. These layers show public
transit network of locations supported by transit
information.
Un-Checked
Weather Layers Specifies whether the layer to represent weather
conditions including temperature and wind speed
of your locations on the map be enabled or not.
The units of temperature and wind speed will
appear as per your selections.
Un-Checked
Bicycling Layers Specifies whether the bicycling layer can be
activated to find any bicycle, bike paths or other
bicycling specific overlays on the map or not. This
will depict bicycling routes by dark green lines and
streets with these routes by light green lines.
Dashed lines stand for paths recommended for
bicycling.
Un-Checked
Panoramio Layers Specifies whether the Panoramio Layer in Google
maps will display a layer of geotagged photos in
the form of photo icons or not. When you click on
any of the photo icons, an infowindow with its
larger photo and detailed information are drawn
out.
Un-Checked
wplocker.com
WP Google Map Pro User Guide
16. In the Layers section, Specify whether the KML layers to display the geographic information
given by the KML link be enabled or not by checking or un-checking the Kml Layer field.
The KML link can be entered in a field that will be generated when you enable the check box.
17. Specify whether the fusion table layers can be activated or not. If checked, enter the key in
the select field and table name in the field. This will generate a shortcode next to your map
in the Manage Maps list. Paste the shortcode in your page/post to display your map with its
corresponding locations and their detailed information by checking or un-checking the
Fusion Table Layer field.
18. Specify whether the traffic layers can be represented on your Google map or not by
checking or un-checking the Traffic Layer field. This layer displays real time traffic
conditions of supported locations.
19. Specify whether the transit layers can be viewed on Google maps or not by checking or un-
checking the Transit Layer field. These layers show public transit network of locations
supported by transit information.
20. Specify whether the layer to represent weather conditions including temperature and wind
speed of your locations on the map be enabled or not by checking or un-checking the
Weather Layer field. The units of temperature and wind speed will appear as per your
selections.
21. If you check the Weather Layer field, the Temperature Unit and Wind Speed Unit fields
are displayed. Select the temperature unit from the available units in the Temperature Units
field. The available options are Celsius and Fahrenheit.
22. Select the wind speed unit from the available units in the wind Speed Units field. The
available options are mph, km/h and m/s.
23. Specify whether the bicycling layer can be activated to find any bicycle, bike paths or other
bicycling specific overlays on the map or not by checking or un-checking the Bicycling
Layer field. This will depict bicycling routes by dark green lines and streets with these routes
by light green lines. Dashed lines stand for paths recommended for bicycling.
24. Specify whether the Panoramio Layer in Google maps will display a layer of geotagged
photos in the form of photo icons or not by checking or –un-checking the Panoramio Layer
field. When you click on any of the photo icons, an infowindow with its larger photo and
detailed information are drawn out.
Scroll down to more options.
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
Turn Off Pan
Control
Specifies whether to turn off the pan control or not.
The pan control also allows map to rotate 45°
imagery, if available.
Un-Checked
Turn Off Zoom
Control
Specify whether you wish to turn off the zoom control
or not. Normally mouse scrolls and "+/-" buttons on
the map are used to control zoom levels.
Un-Checked
Turn Off Map
Type Control
Specifies whether to turn off the map type control or
not. Keep the option turned-on in order to toggle
between map types, usually roadmap and satellite. By
default, the control appears at the top right corner of
map.
Un-Checked
Turn Off Scale
Control
Specifies whether to turn off the scale control or not. Un-Checked
Turn Off Street
View Control
Specifies whether to turn off the street view control or
not. This control appears on top left corner of the
map in form of a Pegman icon. The icon can be
dragged onto the map to enable street view. Check
mark the box to revoke the control.
Un-Checked
Turn Off
Overview Map
Control
Specifies whether you wish to turn off the overview
control or not. This control is used to display a
thumbnail overview map reflecting current map
viewport within a wider area. By default, the control
appears in its collapsed state in the bottom right
corner of map.
Un-Checked
25
26
27
29
30
28
wplocker.com
WP Google Map Pro User Guide
25. In the Control Settings section, specify whether to turn off the pan control or not by
checking or un-checking the Turn Off Pan Control field. The pan control also allows map to
rotate 45° imagery, if available.
26. Specify whether you wish to turn off the zoom control or not by checking or un-checking the
Turn Off Zoom Control field. Normally mouse scrolls and "+/-" buttons on the map are
used to control zoom levels.
27. Specify whether to turn off the map type control or not by checking or un-checking the
Turn Off Map Type Control field. Keep the option turned-on in order to toggle between
map types, usually roadmap and satellite. By default, the control appears at the top right
corner of map.
28. Specify whether to turn off the scale control or not by checking or un-checking the Turn Off
Scale Control field.
29. Specify whether to turn off the street view control or not by checking or un-checking the
Turn Off Street View Control field. This control appears on top left corner of the map in
form of a Pegman icon. The icon can be dragged onto the map to enable street view. Check
mark the box to revoke the control.
30. Specify whether you wish to turn off the overview control or not by checking or un-checking
the Turn Off Overview Map Control field. This control is used display a thumbnail overview
map reflecting current map viewport within a wider area. By default, the control appears in
its collapsed state in the bottom right corner of map.
Scroll down to more options.
It has the following fields.
30 31 32 33
wplocker.com
WP Google Map Pro User Guide
Field Description Example
Feature Type Refers to the type of feature used in map. Usually a map
consists of a set of features specified by categories like
roads, parks, schools, business etc.
administrative
Element Type Specifies the type of the element used in map. geometry
Color Specify a color of the map style. FFFFFF
Visibility Specifies the visibility of the map style. The available
options are Yes, No and Simplified.
Yes
For each of the selected style, set the following parameters.
31. In the Map Style Setting section, select the type of feature used in map from the Feature
Type drop down list.
32. Select the type of the element used in map from the Element Type drop down list.
33. Enter the color of the map style in the Color text entry box.
34. Select the visibility of the map style from the Visibility drop down list. The available options
are Yes, No and Simplified.
Scroll down for more options.
The Street View Setting section has the following fields.
Field Description Example
Turn On Street
View Setting
Specifies whether the street view control is enabled or
not. If this field is checked, additional options are
displayed.
Checked
Turn On Close
Button
Specifies whether the close button for the street view
control is available or not.
Un-checked
Turn Off links Specifies whether to turn off the link controls for the Un-checked
35
36
37
38
wplocker.com
WP Google Map Pro User Guide
Control street view control or not.
Turn Off Street
View Pan Control
Specifies whether to turn off the street view pan
control or not.
Un-checked
35. In the Street View Settings section, specify whether the street view control is enabled or
not by checking or un-checking the Turn On Street View Setting field. If this field is
checked, additional options are displayed.
36. Specify whether the close button for the street view control is available or not by checking or
un-checking the Turn On Close Button field.
37. Specify whether to turn off the link controls for the street view control or not by checking or
un-checking the Turn Off links Control field.
38. Specify whether to turn off the street view pan control or not by checking or un-checking
the Turn Off Street View Pan Control field.
Scroll down for more options.
The Route Direction Setting section has the following fields.
Field Description Example
Turn On Street
View Setting
Specifies whether the street view setting is enabled or
not. If this is checked, additional options are displayed.
Checked
Route Direction
Stroke Color
Refers to the route direction stroke color. F22800
Route Direction Refers to the route direction stroke opacity. 0.1
39
40
41
42
wplocker.com
WP Google Map Pro User Guide
Stroke Opacity
Route Direction
Stroke Weight
Refers to the route direction stroke weight. 1
39. In the Route Direction Setting section. specify whether the street view setting is enabled or
not by checking or un-checking the Turn On Street View Setting field. If this is checked,
additional options are displayed.
40. Select the to the route direction stroke color from the Route Direction Stroke Color pallet.
41. Select the route direction stroke opacity from the Route Direction Stroke Opacity drop
down list.
42. Select the route direction stroke weight from the Route Direction Stroke Weight drop
down list.
Scroll down for more options.
The Marker Cluster Setting section has the following fields.
Field Description Example
Marker Cluster Specifies whether the marker cluster can be or not. If this
field is checked, additional options are displayed.
Checked
Grid Refers to the grid value of the cluster. The default value
is 15.
--------
Style Refers to the style of the marker cluster. The available
options are Default, People, Conversation and Herat.
Default
Max Zoom
Level
Refers to the maximum zoom level of the marker cluster. 1
43
44
45
46
wplocker.com
WP Google Map Pro User Guide
43. In the Marker Cluster Setting section, specify whether the marker cluster can be or not by
checking or un-checking the Marker Cluster field. If this field is checked, additional options
are displayed.
44. Enter the grid value of the cluster in the Grid text entry box. The default value is 15.
45. Select the style of the marker cluster from the Style drop down list. The available options are
Default, People, Conversation and Herat.
46. Select the maximum zoom level of the marker cluster from the Max Zoom Level drop down
list.
Scroll down for more options.
The Overlay Setting section has the following fields.
Field Description Example
Overlay Specifies whether the overlay is enabled or not. If this field
is checked, additional options are displayed.
Checked
Overlay Border
Color
Refers to the border color of the overlay. The default color
is red.
F22800
Overlay Width Refers to the width value in pixels of the overlay. The ------
47
48
49
50
51
52
53
wplocker.com
WP Google Map Pro User Guide
default value is 200px.
Overlay Height Refers to the height value in pixels of the overlay. The
default value is 200px.
------
Overlay Font
Size
Refers to the font size in pixels of the overlay. The default
value is 16px.
------
Overlay Border
Width
Refers to the width value in pixels of the overlay border.
The default value is 2px.
------
Overlay Border
Style
Refers to the border style of the overlay. The available
options are Default, Solid and Dashed.
Default
47. In the Overlay Setting section, specify whether the overlay is enabled or not by checking or
un-checking the Overlay field. If this field is checked, additional options are displayed.
48. Select the border color of the overlay from the Overlay Border Color pallet. The default
color is red.
49. Enter the width value in pixels of the overlay in the Overlay Width text entry box. The
default value is 200px.
50. Enter the height value in pixels of the overlay in the Overlay Height text entry box. The
default value is 200px.
51. Enter the font size in pixels of the overlay in the Overlay Font Size text entry box. The
default value is 16px.
52. Enter the width value in pixels of the overlay border in the Overlay Border Width text entry
box. The default value is 2px.
53. Select the border style of the overlay from the Overlay Border Style drop down list. The
available options are Default, Solid and Dashed.
Scroll down for more options.
The Limit Panning and Zoom section has the following fields.
54
56
55
57
wplocker.com
WP Google Map Pro User Guide
Field Description Example
Limit Panning
and Zoom
Specifies whether the panning and zooming are limited or
not. If this field is checked, additional options are displayed.
Checked
From Refers to the starting latitude and longitude values for
panning and zooming.
-------
To Refers to the ending latitude and longitude values for
panning and zooming.
-------
Zoom Level Refers to the minimum zooming level. 1
54. In the Limit Panning and Zoom section, specify whether the panning and zooming are
limited or not by checking or un-checking the Limit Panning and Zoom field. If this field is
checked, additional options are displayed.
55. Enter the starting latitude and longitude values for panning and zooming in the From text
entry box.
56. Enter the ending latitude and longitude values for panning and zooming in the To text entry
box.
57. Select the minimum zooming level from the Zoom Level drop down list.
Scroll down for more options.
58
60
62 61
63
66
64
65
59
wplocker.com
WP Google Map Pro User Guide
The Tabs Settings section has the following fields.
Field Description Example
Display Marker
Category
Specifies whether displaying of market category is enabled
or not. If this field is checked, additional options are
displayed.
Checked
Display
Categories Tab
Specifies whether the displaying of categories tab is
enabled or not.
Un-checked
Display
Directions Tab
Specifies whether the displaying of directions tab is enabled
or not.
Un-checked
Display Nearby
Tab
Specifies whether the displaying of nearby tab is enabled or
not.
Un-checked
Tabs Font Color Refers to the font color of the tab. 818392
Category Font
Color
Refers to the font color of the category. 000000
Category Font
Size
Refers to the font size of the category. -------
Location Font
Color
Refers to the font color of the location. 9C9797
Location Font
Size
Refers to the font size of the location. -------
58. In the Tabs Settings section, specify whether displaying of market category is enabled or
not by checking or un-checking the Display Marker Category field. If this field is checked,
additional options are displayed.
59. Specify whether the displaying of categories tab is enabled or not by checking or un-
checking the Display Categories Tab field.
60. Specify whether the displaying of directions tab is enabled or not by checking or un-
checking the Display Directions Tab field.
61. Specify whether the displaying of nearby tab is enabled or not by checking or un-checking
the Display Nearby Tab field.
62. Enter the font color of the tab in the Tabs Font Color text entry box.
63. Enter the font color of the category in the Category Font Color text entry box.
64. Enter the font size of the category in the Category Font Size text entry box.
65. Enter the font color of the location in the Location Font Color text entry box.
66. Enter the font size of the location in the Location Font Size text entry box.
Scroll down for more options.
wplocker.com
WP Google Map Pro User Guide
The List Settings section has the following fields.
Field Description Example
Display Listing Specifies whether the displaying of listing is enabled or not.
If this field is checked, additional options are displayed.
Checked
Locations per
Page
Refers to the locations per page. -------
Display Search
Form Before
Listing
Placeholder
Specifies whether the displaying of search form before
listing placeholder is enabled or not.
Checked
Listing
Placeholder
Refers to the code of listing placeholder. -------
67. In Listing Settings section, specify whether the displaying of listing is enabled or not by
checking or un-checking the Display Listing field. If this field is checked, additional options
are displayed.
68. Enter the locations per page in the Locations per Page text entry box.
67
69
700
68
Click Save Map
wplocker.com
WP Google Map Pro User Guide
69. Specify whether the displaying of search form before listing placeholder is enabled or not by
checking or un-checking the Display Search Form Before Listing Placeholder field.
70. Enter the code of listing placeholder in the Listing Placeholder text entry box.
71. Click the Save Map button.
The new map will be saved.
2.7 Managing Maps
To manage maps, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Map.
The Manage Map screen will be displayed.
It has the following fields.
Field Description Example
Title Refers to the title of the map. With 45 Imagery
wplocker.com
WP Google Map Pro User Guide
Map Width Refers to the width of the map. 600
Map Height Refers to the height of the map. 500
Map Zoom
Level
Refers to the zoom level of the map. 11
Map Type Refers to the type of the map. SATELLITE
Short Codes Refers to the short codes of the map. [put_wpgm id=22]
From here you can edit, delete and manage the map. For more information refer to the
following sections.
Editing a Map
Deleting a Map
2.7.1 Editing a Map
To edit a map, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Map.
The Manage Map screen will be displayed.
2. Check the box in the row of the map record that you wish to edit.
Click Edit
2
wplocker.com
WP Google Map Pro User Guide
3. Click the Edit button.
The details of the selected map will be displayed in edit mode.
From here, you can edit the map details. For more details, refer to Creating a Map section.
2.7.2 Deleting a Map
To delete a map, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Map.
The Manage Map screen will be displayed.
wplocker.com
WP Google Map Pro User Guide
2. Check the box in the row of map record that you wish to delete.
3. Click the Delete button.
The selected map will be removed.
2.8 Drawing on a Map
To draw on a map, follow the steps given below.
1. Navigate to the WP Google Map -> Drawing.
The Drawing on Maps screen will be displayed.
Click Delete
2
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
Select Your
Maps
Specifies the type of the map from the available list. Enable Visual
Refresh
Fill Color Specifies the fill color to apply for a more customized
experience.
1938FF
Opacity Refers to the opacity to apply for a more customized
experience.
1
Stroke Color Refers to the stroke color to apply for a more customized
experience.
323FB8
Thickness Refers to the thickness to apply for a more customized
experience.
2
2. Select the map that you wish to draw from the Select Your Map drop down list.
3. Select the color to be filled to the map from the Fill Color pallet.
4. Enter the opacity for the map in the Opacity text entry box.
5. Select the stroke color for the map from the Stroke Color pallet.
2
Click Save Drawing
3 4 5 6 7
wplocker.com
WP Google Map Pro User Guide
6. Enter the thickness of the map in the Thickness text entry box.
7. Click the Apply button.
8. Draw on the map to depict various routes and regions.
9. Click the Save Drawing button.
The drawing on the map will be saved.
2.9 Adding a Marker Category
To add a marker category, follow the steps given below.
1. Navigate to the WP Google Map -> Add Marker Category.
The Add Marker Category screen will be displayed.
It has the following fields.
Field Description Example
Category Refers to the name of the marker category title. Aircraft
2
3
Click Save Marker Category
wplocker.com
WP Google Map Pro User Guide
Title
Choose
Marker
Image
Refers to the marker image relevant to the category. You can
upload the required marker image file from your computer.
---------
2. Enter the title for the marker category in the Category Title text entry box.
3. Choose the image for the marker category by clicking the Upload Marker Image link. Select
the image file from your computer.
4. Click the Save Marker Category button.
The new marker category will be saved.
2.10 Managing Marker Categories
1. Navigate to the WP Google Map -> Manage Marker Categories.
The Manage Marker Categories screen will be displayed.
From here you can edit, delete and manage the marker category. For more information refer to
the following sections.
Editing a Marker Category
Deleting a Marker Category
wplocker.com
WP Google Map Pro User Guide
2.10.1 Editing a Marker Category
To edit a marker category, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Marker Categories.
The Manage Marker Categories screen will be displayed.
2. Check the box in the row of the marker category that you wish to edit.
3. Click the Edit button.
The details of the selected category will be displayed in edit mode.
2
Click Edit
wplocker.com
WP Google Map Pro User Guide
4. Edit the title for the marker category in the Category Title text entry box.
5. Choose the image for marker category by clicking the Upload Marker Image link.
6. Click the Update Marker Category button.
The changes made to the selected marker category record will be updated.
2.10.2 Deleting a Marker Category
To delete a marker category, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Marker Categories.
The Manage Marker Categories screen will be displayed.
4
5
Click Update
Marker Category
wplocker.com
WP Google Map Pro User Guide
2. Check the box in the row of the marker category that you wish to delete.
3. Click the Delete button.
The selected marker category will be deleted.
2.11 Adding Route
To add a route, follow the steps given below.
1. Navigate to the WP Google Map -> Add Route.
The Add Route screen will be displayed.
Click Delete
2
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
Route Title Refers to the title of the route. Sydney Street
Stroke Color Refers to the stroke color of the route direction. The
default color is blue.
8CAEF2
Stroke Opacity Refers to the stroke opacity of the route direction. 1
Stroke Weight Refers to the stroke weight of the route direction. 10
Travel Modes Refers to the travel modes used on the route. Driving
Unit Systems Refers to the unit systems used for the route direction.
2
3
4
5
6
7
8
9
11
10
12
wplocker.com
WP Google Map Pro User Guide
Draggable Specifies whether the marker can be draggable or not.
Metric
Display Custom
Marker
Specifies whether the custom markers can be displayed
or not.
Un-checked
Optimize
Waypoints
Specifies whether the waypoint optimization is enabled
or not.
Checked
Start Location Refers to the starting location of the route.
208, Broadway
End Location Refers to the ending location of the route.
208, Broadway
2. Enter the title of the route in the Route Title text entry box.
3. Select the route direction stroke color from the Stroke Color pallet.
4. Select the stroke opacity of the route direction from the Stroke Opacity drop down list.
5. Select the stroke weight of the route direction from the Stroke Weight drop down list.
6. Select the mode of the travel from the Travel Modes drop down list. The available options
are Driving, Walking, Bicycling and Transit.
7. Select the unit system from the Unit Systems drop down list. The available options are
Metric and Imperial.
8. Specify whether the marker is draggable by user or not by checking or un-checking the
Draggable field.
9. Specify whether the custom markers can be displayed or not by checking or un-checking
the Display Custom Marker field.
10. Specify whether the optimize waypoints are enabled or not by checking or un-checking the
Optimize Waypoints field.
11. Select the starting location of the route from the Start Location drop down list.
12. Select the ending location of the route from the End Location drop down list.
Scroll down for more options.
wplocker.com
WP Google Map Pro User Guide
13. In the Way Points section, select the type of the filter from the Filter drop down list. The
available options are Select Group, Church, Embassy and Aircraft.
14. Check the required route options that you wish to add.
15. Click the Save Route button.
The route will be added.
2.12 Manage Routes
1. Navigate to the WP Google Map -> Manage Routes.
The Manage Routes screen will be displayed.
13
14
Click Save Route
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
Title Refers to the title of the route. Newyork Street
Start
Location
Refers to the starting location of the route.
209 Broadway, New York,
US
End
Location
Refers to the ending location of the route.
1157 Lexington Ave, New
York city, US
From here you can edit, delete and manage the routes. For more information refer to the
following sections.
Editing a Route
Deleting a Route
2.12.1 Editing a Route
To edit a route, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Routes.
The Manage Routes screen will be displayed.
wplocker.com
WP Google Map Pro User Guide
2. Check the box in the row of the route that you wish to edit.
3. Click the Edit button.
The details of the selected route will be displayed in edit mode.
2
Click Edit
wplocker.com
WP Google Map Pro User Guide
4. Edit the title of the route in the Route Title text entry box.
5. Select the route direction stroke color from the Stroke Color pallet.
6. Select the stroke opacity of the route direction from the Stroke Opacity drop down list.
7. Select the stroke weight of the route direction from the Stroke Weight drop down list.
8. Select the mode of the travel from the Travel Modes drop down list. The available options
are Driving, Walking, Bicycling and Transit.
9. Select the unit system from the Unit Systems drop down list. The available options are
Metric and Imperial.
2
3
4
5
6
7
8
9
11
10
12
wplocker.com
WP Google Map Pro User Guide
10. Specify whether the marker is draggable by user or not by checking or un-checking the
Draggable field.
11. Specify whether the custom markers can be displayed or not by checking or un-checking
the Display Custom Marker field.
12. Specify whether the optimize waypoints are enabled or not by checking or un-checking the
Optimize Waypoints field.
13. Select the starting location of the route from the Start Location drop down list.
14. Select the ending location of the route from the End Location drop down list.
Scroll down for more options.
15. In the Way Points section, select the type of the filter from the Filter drop down list. The
available options are Select Group, Church, Embassy and Aircraft.
16. Check the available options that you wish to add to the route.
13 14
Click Update Route
wplocker.com
WP Google Map Pro User Guide
17. Click the Update Route button.
The selected route will be updated.
2.12.2 Deleting a Route
To delete a route, follow the steps given below.
1. Navigate to the WP Google Map -> Manage Routes.
The Manage Routes screen will be displayed.
4. Check the box in the row of the route that you wish to delete.
5. Click the Delete button.
The selected route will be deleted.
2.13 Configuring Google WP Map Pro Settings
To configure Google WP Map Pro settings, follow the steps given below.
Click Delete
2 wplocker.com
WP Google Map Pro User Guide
1. Navigate to the WP Google Map -> Settings.
The Google WP Map Pro Settings screen will be displayed.
Click Save Changes
2
3
4
5
6
wplocker.com
WP Google Map Pro User Guide
It has the following fields.
Field Description Example
Zoom Level Refers to the zoom level value for your Google map. The zoom
level value ranges between 1 and 19, default being 14.
4
Center
Latitude
Refers to the latitude value for the center location of the map.
------
Center
Longitude
Refers to the longitudinal value for the center location of the
map.
------
Select
Language
Refers to the language to be used on the WP Google Map
Plugin supports multiple languages for Google maps. Default
language is English.
English
Choose Post
Types
Refers to the type of post in which map is displayed. The
available options are Post, News, Review and Events.
2. In the General Settings section, enter the zoom level value for your Google map in the
Zoom Level text entry box. The zoom level value ranges between 1 and 19, default being 14.
3. Enter the latitude value for the center location of the map in the Center Latitude text entry
box.
4. Enter the longitudinal value for the center location of the map in the Center Longitude text
entry box.
5. Select the language to be used on the WP Google Map Plugin supports multiple languages
for Google maps from the Select Language drop down list. The default language is English.
6. Select the type of post in which map is displayed from the Choose Post Types option. The
available options are Post, News, Review and Events.
7. Click the Save Changes button.
The changes made to the Google WP Map Pro Settings will be saved.
2.14 Using Shortcodes
The WP Google Map plugin provides shortcodes which are helpful for a non-programmer and
programmer to display maps dynamically. Below are the shortcode combinations you may use.
The possibilities are endless to create combinations of shortcodes.
To use short codes, follow the steps given below.
wplocker.com
WP Google Map Pro User Guide
1. Navigate to the WP Google Map in the left section.
The WP Google Map screen will be displayed.
The standard format for short code is as below.
[display_map marker1="latitude | longitude | infowindow message | draggable | clickable
| marker group id"]
Latitude - Enter latitude of the location.
Longitude - Enter longitude of the location.
Infowindow Message (optional) - Enter message to display by click on marker. HTML
Tags are allowed.
Draggable (optional) - Make this marker draggable. The available options are True and
False. Default is False.
wplocker.com
WP Google Map Pro User Guide
Clickable (optional) - Make this marker clickable. The available options are True and
False. Default is True.
Marker Group (optional) - Provides id of the group. You can retrieve id from Manage
Marker Categories page.
Note: You can display any number of markers using this shortcode.
Below are few examples to understand it better.
Single Location: [display_map marker1="39.639538|-101.527405 | This is first marker's
info window message | false | true"]
Multiple Locations: [display_map marker1="39.639538|-101.527405"
marker2="39.027719|-111.546936"]
2.15 Displaying Map Using Address
Standard format for shortcode is as below.
[display_map address1=" New Delhi, india | infowindow message | draggable | clickable |
marker group id"]
Address - Enter address of the location.
Infowindow message (optional) - Enter message to display by click on marker. HTML
Tags are allowed.
Draggable (optional) - Make this marker draggable. options is true/false. Default is false.
Clickable (optional) - Make this marker clickable. options is true/false. Default is true
Marker Group (optional)- Provides id of the group. You can retrive id from Manage
Marker Categories page.
So you can display any number of markers using this shortcode.
Below are few examples to understand it better.
Single Location : [display_map address1="New Delhi, india | This is first marker's info
window message | false | true"]
Multiple Locations : [display_map address1="New Delhi, India" address2="Mumbai,
India"]
wplocker.com
WP Google Map Pro User Guide
2.16 Displaying Map in a Post /Page
Note: In order to display a map in a post or page, you must use the shortcode of the map that
you created using the Google WP Map Pro plugin. Copy the short code and then paste it in
the post.
To do so, follow the steps given below.
1. Navigate to WP Google Map - > Manage Map.
The Manage Map screen will be displayed.
2. Copy the shortcode of the map that you wish to add in the post, under the Shortcodes
column. You can select the short code and then press Ctrl+C shortcut key on the keyboard.
The selected shortcode will be copied to the clipboard.
3. Now, navigate to the Posts -> Add New.
The Add New Post screen will be displayed.
wplocker.com
WP Google Map Pro User Guide
4. Enter the title for the map in the Title text entry box.
5. Paste the copied short code in the text entry box. You can press Ctrl+V shortcut key on the
keyboard.
Now you can add geo-tags to the post.
Geo-tagging is the process of adding geographical information (ADDRESS) to various media
(PAGES OR POSTS) in the form of metadata (CUSTOM FIELDS). It is known as Geo-tags because
you specify the address in the posts/pages using custom fields.
Click View Post
2
3
4
5
6
7
wplocker.com
WP Google Map Pro User Guide
6. Select the name of the location from the Enter Location drop down list.
7. The Latitude and Longitude fields will be automatically populated based on the location
you select.
8. Select the marker group from the Marker Group drop down list.
9. Select the type of map from the Select Map drop down list.
10. Click the View Post button to test the post.
The post with the map will be displayed.
11. Review the map and its function.
12. Then back on the post, save the post and publish it.
Your post with map created from the Google WP Map Pro plugin will be published.
2.17 Displaying Map in Sidebar
To display a map in the sidebar, follow the steps given below.
wplocker.com
WP Google Map Pro User Guide
1. Navigate to Appearance -> Widgets.
The Widgets screen will be displayed.
Scroll down to WP Google Map Pro option in the left column.
wplocker.com
WP Google Map Pro User Guide
2. Drag the WP Google Map Pro widget from left column to the Main Sidebar section in the
right column.
The WP Google Map Pro widget to display the map will be displayed.
wplocker.com
WP Google Map Pro User Guide
3. Select the map that you wish to add, from the Select Your Map drop down list.
4. Click the Save button.
The selected map from WP Google Map Pro will be added to the side bar.
Click Save
3
wplocker.com
WP Google Map Pro User Guide
3. LIVE EXAMPLES
3.1 100% Responsive Google Map
The Google WP Map Pro plugin provides 100% responsive Google Maps. It adjusts itself to any
window size and device.
For live example, refer to the following link:
http://www.flippercode.com/wp-google-map-pro-examples/
wplocker.com
WP Google Map Pro User Guide
3.2 Filter Locations by Categories
The Google WP Map Pro plugin allows you to display locations under the map with a search box.
You can search category, latitude, longitude, location title or address in the listing using this search
box. Listing is ajax based, paginated and configurable from the backend.
For live example, refer to the following link:
http://www.flippercode.com/filtration-using-categories-on-google-maps/
3.3 Styled Google Map Skins
The Google WP Map Pro plugin allows you to create styled Google map skins. You can display
and manage your custom map and implement your own map skin.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/styled-google-map-skin/
3.4 Google Map Street View
The Google WP Map Pro plugin allows you to display street view of any location. The Street
View provides panoramic 360 degree views from the selected road throughout its coverage
area.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-street-view-using-wordpress-plugin/
3.5 Google Map Weather Layer
The Google WP Map Pro plugin allows you to set the weather layer over your map. It displays
the current temperature and weather conditions with the help of icons denoting sun, clouds,
rain etc on your Google Map. An info window with detailed weather conditions for the next 4
days like humidity and wind conditions pops up when you click the weather icon.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-weather-layer-using-wordpress-plugin/
3.6 Display Posts, Pages or Custom Post Types on Google Maps
The Google WP Map Pro plugin allows you to display posts, pages or custom post types on
google map.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/display-postspages-or-custom-post-types-on-google-maps/
3.7 Google Map Traffic Layer
The Google WP Map Pro plugin allows you to enable traffic layer over your Google Map. The
traffic layers on Google Maps exhibit real time traffic conditions for locations that support it. The
Google map below shows very high traffic by black/red, yellow depicts average and green color-
codes show low traffic conditions.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-traffic-layer-using-wordpress-plugin/
3.8 Google Map Bicycling Layer
The Google WP Map Pro plugin allows you to create the Bicycling layer to find any bicycle or
bike paths available. This layer displays bike paths, suggested bike routes and other overlays
specific to bicycling on top of the map. In the map depicted, the bicycling routes are indicated
by dark green lines and streets with these routes are shown by light green lines. Dashed lines
stand for paths recommended for bicycling.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-bicycling%20-layer-using-wordpress-plugin/
3.9 Google Map Panoramic Layer
The Google WP Map Pro plugin allows you to create the Panoramic Layer in Google Maps. This
consists of a layer of geotagged photos in the form of large and small photo icons. You can click
on any photo icon to get an info window with a larger photo and detailed information about it.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-panoramic-layer-using-wordpress-plugin-2/
3.10 Google Map Overlays using WordPress Plugin
The Google WP Map Pro plugin allows you to illustrate a normal 2D roadmap with overlays
bound to certain latitude/longitude coordinates. You can customize the overlays with options
like border color, border style, overlay width, overlay height, font size etc.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-overlays-using-wordpress-plugin/
3.11 Google Map Satellite with Overlays
The Google WP Map Pro plugin allows you to create the satellite map that displays locations in
form of images from satellites. You can customize such maps with overlays.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-satellite-with-overlays-using-wordpress-plugin/
3.12 Google Map 45 degree Imagery
The Google WP Map Pro plugin enables your map to alter its perspective view for the locations
that support 45° Imagery in Google Maps. It allows you to rotate the image using a compass
wheel around the Pan control, also rotate the map clockwise through supported directions by
means of a rotate control between the Pan and Zoom controls. You can use the toggle control
under the Satellite control/label to display the 45° perspective view. The 45 degree imagery is
supported only at high zoom levels in the satellite and hybrid maps. Zooming out will revert all
the changes.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-45-degree-imagery-using-wordpress-plugin/
3.13 Google Map without 45 degree Imagery
The Google WP Map Pro plugin allows you to create maps without 45 degree imagery.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-45-degree-imagery-using-wordpress-plugin/
3.14 Turn Off Scrolling Wheel on Google Map
The Google WP Map Pro plugin allows you to disable the scrolling wheel on Google Map. By
default, the scrolling wheel in Google maps is enabled that zooms in and zooms out the map as
mouse scrolls.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/turn-off-scrolling-wheel-on-google-map-using-wordpress-plugin/
3.15 Enable Visual Refresh on Google Map using WordPress Plugin
The Google WP Map Pro plugin allows you to enable visual refresh on maps. This gives a new
look to Google maps including the base map tiles, default marker, info window style and style
refresh of the controls keeping the same functionalities of custom markers, overlays, and map
types.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/enable-visual-refresh-on-google-map-using-wordpress-plugin/
3.16 Google Map Marker Cluster
The Google WP Map Pro plugin allows you to create marker Cluster in Google Maps indicating
multiple nearby locations marked up in an aggregated form in a map. You can create and
display marker clusters for multiple locations using draggable markers over the same Google
map.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/google-map-marker-cluster-using-wordpress-plugin/
3.17 Google Map KML Layers using WordPress Plugin
The Google WP Map Pro plugin allows you to create KML layers on Google Map to display the
geographic information given by the KML link.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/implement-kml-layers-on-google-map-using-wordpress-plugin/
3.18 Display Polygons on Google Map
The Google WP Map Pro plugin allows you to create a polygon in Google Maps for a clear
representation of a region with one or more paths. You can customize their border with
background color.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/display-polygons-on-google-map-using-wordpress-plugin/
3.19 Display Polylines on Google Map
The Google WP Map Pro plugin allows you to create Polylines on Google Maps to display path
between different locations. You can also customize the style of polyline, stroke color, stroke
weight etc.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/display-polylines-on-google-map-using-wordpress-plugin/
3.20 Display Route Direction on Google Map
The Google WP Map Pro plugin allows you to display route directions between different
locations on a Google map. Drag and drop the markers to change the end locations or the route
itself.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/display-route-direction-on-google-map-using-wordpress-plugin/
3.21 Location Listings on Google Map
The Google WP Map Pro plugin allows you to create multiple location listings on Google Map.
wplocker.com
WP Google Map Pro User Guide
For live example, refer to the following link:
http://www.flippercode.com/filtration-using-categories-on-google-maps/
wplocker.com