Google Maps : Pointing and get your marker location
by ronggur on August 1, 2009
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
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 
. 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Google Map in Learning</title> <link href="styles/style.css" type="text/css" media="screen" rel="stylesheet" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;sensor=false&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAYeuJd8iDXzlrlsewUFBcLhQCLRJBQIjl4T4yd7P58JjfH0ny1BRyKA-JaUsGkxqxnC7LUYx0xI7rAQ" type="text/javascript"></script> <script src="js/addmarker.js" type="text/javascript"></script> </head> <body> <div id="wrapper_map"> <div id="map_canvas" style="width: 640px; height: 300px"></div> <div id="wrapper_form"> <p><strong>Your Location : </strong></p> <p>Latitude : <span id="sLat"></span></p> <p>Longitude : <span id="sLng"></span></p> <form name="fLocation" id="fLocation" method="post" action="post.php"> <input type="hidden" name="lat" id="lat" value="" /> <input type="hidden" name="lng" id="lng" value="" /> <input type="submit" value="Save" /> </form> </div> </div> </body> </html>
Next is one line php script and named it ‘post.php’, this script just to show that your post data from html is work.
var_dump($_POST);
2. JavaScript
Lets create addmarker.js. Here is the code, i put some comment above the line
$(document).ready(function() {
$("#wrapper_map").width($("#map_canvas").width());
// initialize default lat &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; 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;
}
});
That’s all. So when you press ‘Save’ button it should print out your current marker position.
- Download file Google Maps : Pointing and get your marker location (197)
You can give me some coffee if you want to :D-
http://kucingjkeren.wordpress.com kucingkeren