Trigger request php function when moving google maps marker
When a marker is posted, I want to call a php function (in another file) with latitude and longitude as input and output the result to a div on the page. So whenever the marker is moved it updates the div with the last function result.
I know I need javascript for this, but I am not very familiar with it and any help would be appreciated.
a source to share
Here is an example using jQuery to trigger an HTTP GET when a marker is added to the map and whenever it is dragged. The result of the query is placed in a div with the id "outputdiv".
// create and init map (make sure to have a div element with id "map")
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// this is the marker you want to track
var marker = new GMarker(new GLatLng(37.4419, -122.1419));
map.addOverlay(marker);
// create function to be executed on add/end of drag
var changeCallback = function(latlng) {
// do HTTP GET to execute PHP function in file, with coordinate
// as parameter and put result in div with id "outputdiv"
$("#outputdiv").load("test.php?latlng=" + latlng.toUrlValue());
};
// add listener triggered whenever drag of marker has ended
GEvent.addListener(marker, "dragend", changeCallback);
// explicitly call when added
changeCallback(marker.getLatLng());
Update to answer comment: option latlng callback a GLatLng , where you can use the lat () and lng () to obtain the individual values. See the Google Maps API link for details .
a source to share
You need to use Asynchronous JavaScript and XML (known as AJAX). A good tutorial on the subject can be found here: http://www.w3schools.com/Ajax/Default.Asp .
In fact, you can probably do what you described after you go through these examples.
- You first need to create an XMLHttpRequest object in JavaScript like this: http://www.w3schools.com/Ajax/ajax_browsers.asp
- Then read on how to define the onreadystatechange () method - this is where you specify what happens when the server (the function you want to call).
- Then send a request to a function that you can call by requesting a php file with a GET or POST request like this: xmlhttp.open ("GET", "myfunction.php", true); xmlhttp.send (null) ;
For the rest, just follow the instructions and you should be fine. You really need a tutorial to follow - javascript is pretty easy to copy / paste and edit: D
a source to share