Google Map with custom draggable pointer

Hi,

I have been planning to upload this from a long time, but made it finally now. This possibly is one of my favorite codes to make life easy for programmers. In this, by using a single function you can perform various tasks in a google map. Tasks such as multiple pointers in one map, change the look and feel of pointers, drag and drop pointers and fetch their new coordinates etc.

I have compiled all this functionality in one function in a .php file, "gmap.php". With very slight alterations you can achieve any of the above functionality.

Before going to the details of how to use the function, here is how my web page looks like:

In my application, what I have done is, I have compiled all the various possibilities of my code in 1 web page for better understanding. Now before I start explaining it download the source code from here.

Code & Explanation:

First of you need to include the "gmap.php" file in your PHP page as:

<?php @include("gmap.php"); ?>

Now I am assuming you already have the latitude and longitude of the various points. If you just have the address without the latitude and longitude, check out my article of location to latitude/longitude conversion. The function that I am talking about takes just three parameters:

1. Center of the map

2. Various points on the map

3. Div ID where the map is to be displayed.

The main trick is in the second option. The points or rather latitude/longitude are passed as an array, where first 2 elements of the array are the latitude and longitude. e.g.

$center[0]="-37.773683";

$center[1]="144.889455";

$points=array();

$points[0][0]="-37.773683";

$points[0][1]="144.889455";

generateMap($center,$points,"map1");

This will generate the following:

To customize the pointer I add another element to the array as:


$points=array();
$center[0]="-37.773683";
$center[1]="144.889455";
$points[0][0]="-37.773683";
$points[0][1]="144.889455";
$points[0][2]="images/marker.png";
generateMap($center,$points,"map2");

This will generate the following:

So my pointer is now customized, all I had to do is to pass the image path of the custom pointer as the third element.

As you may see in both the above I have just one element in $points array, that is the reason I am getting only one pointer over the map. Now to make things look more interesting, I will add another element to the $points array to generate multiple pointers on map by:


$points=array();
$points[0][0]="-37.773683";
$points[0][1]="144.889455";
$points[0][2]="images/marker.png";
$points[1][0]="-37.775683";
$points[1][1]="144.891055";
generateMap($center,$points,"map5");

This will generate the following:

In this you will see I have 2 elements of the $points array, where in $points[0] has a third element with the name of the custom pointer and $point[1] without the custom pointer. This way you can categorize pointers by changing their icon.

Now coming to the most tricky part where you can make the user drag and drop the pointer. When you drag and drop a pointer, then it returns the new latitude/longitude, which you need to save in the database or perform some other task as needed. For that you need to call a javascript function that you have made, which will store the new latitude/longitude in the database via ajax or any other way.

Since this function is your defined function, so you need to pass the name and a unique id for each pointer as the fourth element of the pointer array. e.g:


$points=array();
$center[0]="-37.773683";
$center[1]="144.889455";
$points[0][0]="-37.773683";
$points[0][1]="144.889455";
$points[0][2]="null";
$points[0][3]="saveCoords:P912";
generateMap($center,$points,"map3");

This will generate the same map as the first one, only difference is you can drag and drop the pointer as:

In this I have added a fourth element
     $points[0][3]="saveCoords:P912";

Here saveCoords is a custum function where the new latitude/longitude will be returned and P912 is the unique ID of that pointer. The function, "saveCoords" is as follows:


function saveCoords(pid,new_points){
alert("Pointer ID: "+pid+"\nNew Coordinates: ("+new_points+")")
}

Whenever the drag and drop is complete this function is called, which will alert a message as:

Now in my final script I have put all of the above possibilities in a single map. This has multiple pointers, with one custom pointer and two draggable pointers by:


$points=array();

// This is a custom pointer with drag and drop option
$points[0][0]="-37.773683";
$points[0][1]="144.889455";
$points[0][2]="images/marker.png";    //  Custom pointer
$points[0][3]="saveCoords:P122";    // Draggable pointer calling saveCoords function


// This is a default pointer without drag and drop option
$points[1][0]="-37.775683";
$points[1][1]="144.891055";


// This is a default pointer with drag and drop option
$points[2][0]="-37.771683";
$points[2][1]="144.891055";
$points[2][2]="null";
$points[2][3]="saveCoords:P964";   // Draggable pointer calling saveCoords function
generateMap($center,$points,"map6");

This will generate:

Hope this helped. Best of luck. Download: gmap.zip