Google Maps : Pointing and get your marker location

It's only fair to share...Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on StumbleUponEmail this to someone

In this post i want to try give some simple script to get your marker location in google maps. Next we will ceate one marker and when you drag and drop it, you’ll get the position of the marker ( latitude and langitude ). You can use this kind of script if you want to add google maps feature in to your websites and want to point position and save it in to your database

Image Preview
Image Preview

As usual we’ll use jQuery to give some little help. Lets start

1. HTML & PHP files

You can copy html below. Make sure you already have key for your google maps and use your own key :D. And also don’t forget to include jQuery library.

To get the current position of the marker, we will use hidden intput to store the position temporary before we post it to php file.

[sourcecode language=’html’]





Google Map in Learning



Your Location :

Latitude :

Longitude :





[/sourcecode]

Next is one line php script and named it ‘post.php’, this script just to show that your post data from html is work.

[sourcecode language=’php’]

var_dump($_POST);

[/sourcecode]

2. JavaScript

Lets create addmarker.js. Here is the code, i put some comment above the line

[sourcecode language=’jscript’]

$(document).ready(function() {
$(“#wrapper_map”).width($(“#map_canvas”).width());
// initialize default lat & lang in this case i set to Indonesia

var indLat = -2;
var indLng = 120;

// setup default position into text and hidden input

$(“#sLat”).text(indLat);
$(“#sLng”).text(indLng);
$(“#lat”).val(indLat);
$(“#lng”).val(indLng);

// start setup google maps

var map = new GMap2(document.getElementById(“map_canvas”));
var center = new GLatLng(indLat, indLng);
map.setCenter(center, 4);
map.setUIToDefault();

var marker = new GMarker(center, { draggable: true });

GEvent.addListener(marker, “dragstart”, function() {
map.closeInfoWindow();
});

// a listener to get current position and store it to hidden input in html

GEvent.addListener(marker, “dragend”, function() {
// latitude
$(“#sLat”).text(roundNumber(getObjectLoc(marker, ‘lat’), 5));
// store it temporary in hidden input (lat)
$(“#lat”).val(getObjectLoc(marker, ‘lat’));
// longitude
$(“#sLng”).text(roundNumber(getObjectLoc(marker, ‘lang’), 5));
// store it temporary in hidden input (lng)
$(“#lng”).val(getObjectLoc(marker, ‘lang’));
});

// adding marker
map.addOverlay(marker);
// end setup google maps

// fungction to get the marker posistion

getObjectLoc = function(object, type){
var objectLoc = ”;
if(type==’lat’){
objectLoc = object.getLatLng().lat();
}else{
objectLoc = object.getLatLng().lng();
}

return objectLoc;
}

// just round your position if you think it is too long to show

roundNumber = function(rnum, rlength) {
newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
return newnumber;
}
});

[/sourcecode]

That’s all. So when you press ‘Save’ button it should print out your current marker position.

View Demo

– Download file Google Maps : Pointing and get your marker location (1007)

It's only fair to share...Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on StumbleUponEmail this to someone