“DML Google Map Plugin for PHP” Documentation by “Ard-Soft” v2.1.0


“DML Google Map Plugin for PHP”

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

Thank you for purchasing DML 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 Google Map Plugin?

  2. INSTALLATION
  3. Step-1: Import files to the PHP project
  4. Step-2: Activate Jquery and Bootstrap
  5. Step-3: Import Custom Scripts
  6. Step-4: Database Connection
  7. Step-5: Iclude DML Google Map
  8. Step-6: Activate Login System to Edit Map

  9. USAGE
  10. Usage of The DML Google Map

  11. TROUBLESHOOTING
  12. Nothing works
  13. NOT_FOUND error message

  14. SOURCES
  15. Sources and Credits

A) What is DML Google Map Plugin? - top

DML Google Map is a plugin designed for PHP projects. It lets you integrate easily a Google Map to the PHP projects. The control lets you pin more than one location, add polygons and draw lines without writing even a line of code.

DML Google Map is customizable. Also, it is suitable for PHP developers who prefer to work as visually as possible, without fighting with code. Version 1.0 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 Google Map has been developed using PHP, 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 PHP project - top

Copy & paste "dmlmap" folder into root directory of the PHP web project.


C) Step-2: Activate Jquery and Bootstrap - top

The webpage which DML Google Map is included/placed must be Bootstrap & Jquery enabled.

If so, this part can be ignored. Otherwise, Bootstrap & Jquery references must be placed as shown below.

You can easily copy & paste codes using blue backgrounded boxes.

<!---JQUERY MUST BE REFERENCED FOR DMLMAP---->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<!---JQUERY REFERENCE ENDS FOR DMLMAP---->
Reference to jquery


C) Step-3: Import Custom Scripts - top

Simply copy and paste code just before the end body tag as shown below.

If you want to use the map on a page located in a subfolder, you need to modify the script references according to the location. For further information, please check "sample/sample.php" in downloaded folder.

<!---BOOTSTRAP REFERENCE STARTS FOR DMLMAP---->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<script src="<?php echo BASE_URL; ?>dmlmap/js/bootstrap.min.js" > </script>
<!---DML MAP SCRIPTS---->
<script src="<?php echo BASE_URL; ?>dmlmap/js/dmlmap.js"> </script>
<script src="<?php echo BASE_URL; ?>dmlmap/js/markerclusterer.js"></script>
<link href="<?php echo BASE_URL; ?>dmlmap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="dmlmap/css/map-icons.css" rel="stylesheet" type="text/css">
Custom DmlMap Scripts

B) Step-4: Database Connection - top

DML Google Map Plugin stores data in mySql database on page bases. So, it's possible to add and customize DML Google Map on different pages in the same project.

So, you need to be sure that mySql database is installed on the server and there is a connection to it. Then, easily update database and user information at the "dmlmapfunctions.php" page according to your database as shown below.

After running, DML Google Map Plugin checks the database and creates tables automatically.

Database connection

D) Step-5: Iclude DML Google Map - top

Easily include DML Google Map into the web page as shown below. Simply copy the code and paste into the file where you want to see the map.

IMPORTANT: Be sure to edit include link of the "config.php" according to the page location when you want to use DML Map on a page at the subfolders.

<!-- INCLUDES DML MAP STARTS-->
<?php 
//Be sure that you entered a valid relative path to the config file
require_once("dmlmap/config.php");
//now we can use our config file
include(ROOT_PATH . "dmlmap/dmlmap.php");
?>
<!-- INCLUDES DML MAP ENDS-->
Include DML Google Map

E) Step-6: Activate Login System to Edit Map - top

Visitors can not edit map but just view. You need to activate login system to view map on edit mode.

You will find a sample login system with SESSION object on sample.php when you download project files.

Be careful that you need to create a div with "myMap1Edit" id as shown below. Using this div, you customize the map after logged in.

Please refer to the "index.php" or "sample/sample.php" in downloaded folder for examples. You can easily copy & paste codes.

Login divfor customization

F) Usage of The DML Google Map - 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 Google Map user control. To select a new location and change the settings, user must login.

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

Select place and change settings

Using Custom Map Style - 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.

Using Custom Map Style

Setting 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

Creating Marker By Entering Address (Geocoding) - top

Enter the address while you logged in then click on the SHOW button.

If the address entered is valid, a new pin is created on the map as shown below.

Create new marker by entering 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 and description of the line

Change the Shape of the Polyline by Dragging - top

You can simply change the route of the polyline by dragging the edit points on polyline. Simply select an edit corner and drag it to a new position. Then, click on the polyline and save the polyline settings.

Change the Shape of the Polyline by Dragging

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.

Customizing the polygon

Change the Shape of the Polygon by Dragging - top

You can simply change the shape of the polygon by dragging the edit points. Simply select an edit corner and drag it to a new position. Then, click on the polygon and save the polygon settings.

Change the Shape of the Polygon by Dragging

Creating 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.

Create 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

Change the radius and position of the Circle by Dragging - top

You can simply change the radius or the position of the circle dragging the edit points or the center of the shape. After completing editing, click on the circle and save the circle settings.

Change the radius and position of the Circle by Dragging

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.

Adding 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 BUT circle. You need to enter just THE CODE OF THE YOUTUBE VIDEO as shown below.

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

Adding 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 image, just leaving blank is enough.

Adding 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.

Distance and Driving Time Calculation

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

F) Nothing Works - top

You followed all the instructions but nothing happens. In this case you need to check CONSOLE. For chrome, click on the "..." button at the top-right corner. Then click on the "More Tools" and "Developer tools"

If you see a message as shown below, that means the database information is not valid. Please review "INSTALLATION Step-2 Database connection"" part carefully.

Missing files

G) NOT_FOUND message - top

You followed all the instructions but receive NOT_FOUND error message. In this case you need to check CONSOLE. For chrome, click on the "..." button at the top-right corner. Then click on the "More Tools" and "Developer tools"

If you see a message as shown below, that means the paths to the files are incorrect. Please review "INSTALLATION Step-1 and Step-3 part carefully.

Missing dmlmap php file

H) 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