Step 1. Add Google Maps in post/page or widget
In order to add created Google Maps plugin in post/page, copy/past the shortcode. Or add like a widget from widgets page.
Step 2 Edit Google Maps
2.1 Map Options.
- Map name. Give a name to your map
- Enable Pan-Controller. Select to enable movement controller
- Enable Zoom-Controller. Select to enable zoom controller
- Enable Map-Type-Controller. Enables map controller in order to view satellite as well
- Enable Scale-Controller. Select to show scale
- Enable Street-View-Controller. Select to be able to see streets with “little man”
- Enable Overview-Map-Controller. Select to see map controller on the bottom right corner
- Default Zoom. Set the zoom level for map
- Center Address. Give address to map center
- Center Latitude. Set latitude for the map center
- Center Longitude. Set longitude for map center
- Map width. Give size for map width (in presents)
- Map height. Give size for map height (in px)
- Map align. Put your map on the left, right or center within theme container
- Border Radius. Set the radius for map borders
- Map type. Choose one from 4 different views of the map
- Marker Infowindow Open On. Choose how to open information on marker
2.2 Markers
Click +Add New Marker and create unlimited markers for your specific places.
Right Click on map wherever you want marker to appear.
Hold pressed and change marker’s position moving mouse.
- Address. Give address to the marker
- Latitude. Select latitude to the marker’s place
- Longitude. Select longitude to the marker’s place
- Animation. Choose animation for the marker
- Title. Give title to the marker
- Description. Give title to the marker/place
- Choose Marker Icon from our list of stylish markers
- Size of Icon. Choose marker size
- Custom Marker Icon. You can upload your preferable icon(picture) for marker
2.3 Polygons
Polygons — bounded highlighted area on the map, showing the specific range, limited with geometric figure.
Click +Add New Polygons and create new one for your specific area.
Right click and hold to set polygon’s boundaries
- Name. Give name to the Polygon
- Link. Add link with external URL, which will take to another page
- Latitude & Longitude Data. Manually change or add new borders of polygon
- Line Transparency. Select the level of transparency for boundary line
- Line Color. Choose color for boundary line
- Line Width. Set width for boundary line
- Fill Transparency. Select the level of transparency for internal area of polygon
- Fill Color. Choose color for internal area of polygon
- On-Hover Fill Transparency. Select the level of transparency for internal area of polygon while hover
- On-Hover Fill Color. Choose color for internal area of polygon while hover
- On-Hover Line Transparency. Select the level of transparency for boundary line while hover
- On-Hover Line Color. Choose color for boundary line while hover
2.4 Polylines
Polyline — continuous line composed of one or more line segments, which creates specific track.
Click +Add New Polylines and create new one for your specific area.
Right click and hold to set path of polyline
- Name. Give name to the Polyline
- Latitude & Longitude Data. Right click and select latitude & longitude data for Polyline
- Line Transparency. Select the level of transparency of Polyline
- Line Color. Choose color of Polyline
- Line Width. Set width of Polyline
- On-Hover Line Color. Choose color of Polyline while hover
- On-Hover Line Transparency. Select the level of Polyline transparency while hover
2.5 Circles
Circle — round area, showing the specific range
Click +Add New Circle and create new one for your specific area.
Right click on map wherever you need to place the circle’s center
- Name. Give name to the Polygon
- Center Address. Give some address for center of the circle
- Center Latitude. Select middle Latitude of the circle range
- Center Longitude. Select middle Longitude of the circle range
- Show Marker? Select YES to see the marker in the middle of the circle
- Radius(meter). Give radius level for circle
- Line Width. Set width for boundary line of circle
- Line Color. Give color to boundary line of circle
- Line Transparency. Choose transparency level for boundary line of circle
- Fill Color. Choose color for internal area of circle
- Fill Transparency. Select the level of transparency for internal area of circle
- On-Hover Fill Transparency. Select the level of transparency for internal area of circle while hover
- On-Hover Fill Color. Choose color for internal area of circle while hover
- On-Hover Line Transparency. Select the level of transparency for boundary line while hover
- On-Hover Line Color. Choose color for boundary line while hover
2.6 Layers (PRO)
Layers — highlighted road areas on map
- Enable Traffic Layer. This option will highlight the roads and real-time traffic on them
- Enable Bicycling Layer. Make bicycle road highlighted on your map
- Enable Transit layer. This Highlight transit roads, which connects cities etc.
2.7 Map Styling (PRO)
Layers — highlighted road areas on map
- Hue (Color). Choose some color/tone for the current map
- Lightness. Adjust the lightness level for current map
- Saturation. Adjust saturation level for current map
- Gamma. Adjust gamma level for current map