“DML Easy Google Map Plugin for Wordpress” Documentation by “Ard-Soft” v2.0.0


“DML Easy Google Map Plugin for Wordpress”

Created: 22/12/2016
By: Ard-Soft
Email: info@webmountain.net

Thank you for purchasing DML Easy Google Map Plugin. If you have any question that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thank you so much!


Quick Start Guide

  1. What is DML Easy Google Map Plugin?

  2. INSTALLATION
  3. Step-1: Import files to the Wordpress Plugins Folder and Activate
  4. Step-2: Use Shotcode

  5. USAGE
  6. Usage of The DML Easy Google Map Plugin
  7. Sources and Credits

A) What is DML Easy Google Map Plugin? - top

DML Easy Google Map Plugin lets you integrate easily a Google Map to the Wordpress projects. The plugin lets you pin more than one location, add polygons and draw lines without writing even a line of code.

DML Easy Google Map Plugin is customizable. This version lets you adding multiple markers, polygones and lines on the map with title and description popup. Also it lets you customize the icon of the marker and change the color of the shapes.

DML Easy Google Map Plugin has been developed using Bootstrap 3, Jquery, JSON and AJAX. So, it's recommended to be familiar with these technologies if there is any need for editing source-code.

It's just needed to be imported to the project. Then, it can be used by including as described in the next sections.


B) Step-1: Import files to the Wordpress Plugins Folder and Activate - top

Copy & paste DML Easy Google Map Plugin folder (dml-easy-map) into the Wordpress plugins folder.

Then plugin must be activated on Plugins / Installed Plugin WP page.

"DML Map" menu must be shown on the left side of the admin page as shown below.

DML Map admin menu

C) Step-2: Use Shotcode - top

Easily copy & paste [dml_emap] shortcode to any page / post.

Google Map API CODE screen is appears when the page / post is viewed. To activate map go to the next section.


D) Usage of The DML Easy Google Map Plugin - top

As of June 22, 2016 Google no longer supports keyless usage (any request that doesn't include an API key) of the Google Map. Because of that, the user has to take a valid API key. It's really fast and simple. Follow this link and click on "GET A KEY"

Enter the API KEY and click SAVE. Then the map is activated.

Enter APİ code

Map Settings - top

Anonymous users cannot change any settings of the DML Easy Google Map Plugin. To select a new location and change the settings, user must login.

After login, go to DML Map page Select the page / post link from the dropdown list. After that selected map is loaded.

Select page or post link

"Map Settings" button is seen at the up-left corner of the map when user clicks on the map. Map settings can be changed by settings panel.

Select place and change settings

Adding Custom Map Style using snazzymaps.com - top

Apply awesome Google Maps styles from snazzymaps.com with a simple copy and paste. You can create your own custom styles as well for roads, labels or geometry for your own google maps skin by entering JSON style code.

Add Custom Map Style using snazzymaps.com

Seting Center of The Map - top

To set center of the map, just click on the map. After that, click on the new marker and select green "Center Map Button" as shown below.

Select place and change settings

Creating and Deleting a Marker - top

Click on the map. Then, click on the new marker and select "New Marker" button as shown below.

To delete a marker just click on the marker and then select DELETE button as shown below.

Create and delete icon

It's also possible to add marker by entering address as shown below.

Create marker with address

Changing icon of the Marker - top

After selecting marker click on it. Then, select "icon" button, select icon container, container color and icon from the "Icon Update Panel" then click on the "Change Icon" button.

Change icon of the marker

Creating a New Line - top

After logging in, the map is in drawing mode by default. So, click on the line icon as shown below. Then start to click on the map to create line corners. After completing the line double click. Then follow the instructions you,ll receive.

First corner of the line

Customizing The Line - top

Simply click on the line, select new color or edit the line description and save click on the "Save Line Settings" button.

Change color of the line

Deleting The Line - top

Simply click on the line and click on the "Delete Line" button.

Delete the line

Creating a New Polygon - top

After logging in, the map is in drawing mode by default. So, click on the polygon icon as shown below. Then start to click on the map to create polygon corners. After completing the line double click. Then follow the instructions you,ll receive.

Create new polygon


Customizing The Polygon - top

It's possible to add description and change border and fill color of the polygon just by clicking on it. You need to follow the same steps to delete polygon from the map.

Create new polygon


Deleting The Polygon - top

Simply click on the line and click on the "Delete Polygon" button.

Delete the polygon

Adding A New Circle - top

After logging in, the map is in drawing mode by default. So, click on the circle icon as shown below. Then start to click on the map to create center of the circle. After completing the line double click. Then follow the instructions you,ll receive.

Add new circle

Customizing The Circle - top

It's possible to add description and change border and fill color of the circle just by clicking on it.

Customizing the circle

Deleting The Circle - top

Simply click on the circle and click on the "Delete Circle" button.

Delete the circle

Adding Image to the Info Window - top

It's possible to add an image to the info window of the marker, polyline, polygon and circle. You need to enter a valid image url as shown below.

If you do not want to add any image, just leaving blank is enough.

Add Image to the Info Window

Adding Video to the Info Window - top

It's possible to add a YouTube video to the info window of the marker, polyline, polygon and circle. You need to enter just THE CODE OF THE YOUTUBE VIDEO as shown below.

If you do not want to add any video, just leaving blank is enough.

Add Video to the Info Window

Adding Link to the Info Window - top

It's possible to add a Link to the info window of the marker, polyline, polygon and circle. You need to enter both url link and url text to use it properly.

If you do not want to add any link, just leaving blank is enough.

Add Link to the Info Window

Distance and Driving Time Calculation - top

Simply select two location by clicking on the "Calculate distance". After that distance and driving time is shown just above of the map as shown below.

Calculation of distance and driving time

Using Traffic, Transport and Bicycle layers - top

The Google Maps JavaScript API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. It,s also possible to activate bicycle and transportation layers by simply selecting the related layers from settings panel.

Using Traffic, Transport and Bicycle layers

E) Sources and Credits - top

I've used the following resources as listed below.


Once again, thank you so much for purchasing this user-control. As it is mentioned before, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. If you have a more general question relating to the script on CodeCanyon, you might consider visiting the forums and asking your questions in the "Item Discussion" section.

Ard-Soft

Go To Table of Contents