0

When a marker is placed, I want to call a PHP function (in another file) with the latitude and longitude as input and output the result in a div on the page. So whenever the marker is moved, it updates the div with the latest result of the function.

I know I'd need JavaScript to do this but I'm not very familiar with it and any help would be appreciated.

2 Answers 2

3

Here is an example using jQuery to trigger a HTTP GET when a marker is added to the map and whenever it is dragged. The result of the request is placed in a div with 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: The latlng parameter of the callback function is a GLatLng object where you may use lat() and lng() to retrieve the individual values. See Google Maps API reference for details.

2
  • Thank you for this. I'll definitely give it a try once I get back home. really appreciate your help and effort. May 8, 2009 at 0:21
  • This is probably quite simple to do, but how would I separate the latitude and longitude coordinates? consequently, I'm assuming I'd have to change the call to test.php to something like: load("test.php?lat=" + lat.toUrlValue() + "&lng=" + lng.toUrlValue()); does that sound about right? May 8, 2009 at 0:39
0

You need to use asynchronous JavaScript and XML (known as AJAX). Nice tutorial on the subject might be found here: http://www.w3schools.com/Ajax/Default.Asp.

In fact, you will probably be able to do what you described after you go through these examples.

  1. First you need to create the XMLHttpRequest object in JavaScript like that: http://www.w3schools.com/Ajax/ajax_browsers.asp
  2. Then read about how to define the onreadystatechange() method - this is where you specify what happens when the server (the function you want to call) responds.
  3. Then send the request to the function, which you should be able to call by querying a php file with GET or POST request like that: xmlhttp.open("GET","myfunction.php",true); xmlhttp.send(null);

For the rest just follow the tutorial and you should be fine. You really need a tutorial to follow - javascript is pretty easy to copy/paste and edit :D

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.