Google Maps : Pointing and get your marker location

ronggur — Sat, 01 Aug 2009 11:13:44 +0000

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.






Google Map in Learning









Your Location : 
Latitude : 
Longitude :

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.

- View Demo

- Download file Google Maps : Pointing and get your marker location (100)

You can give me some coffee if you want to :D

Bookmark It

New Google search interface Have you tried the new google search intrerface? here i...

Related posts brought to you by Yet Another Related Posts Plugin.

MySandbox » google maps

Google Maps : Pointing and get your marker location

1. HTML & PHP files

2. JavaScript