October 22, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Creating Draggable Markers with the Google Maps API

  • January 8, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Creating a Listener

Creating a draggable marker solves only part of the puzzle; you also need to listen for marker movement and record the new location when the user releases the marker. To do so, you'll need to use the addListener() method to define a dragend listener, which will execute when the user has released the marker. In total, four listener types are also supported, including click, drag, dragend, and dragstart. Here's an example that defines a dragend listener:

GEvent.addListener(marker, "dragend", function() {
  marker.openInfoWindowHtml(marker.getLatLng().toUrlValue());
});

With the dragend listener added, you'll be able to retrieve the updated coordinates as depicted in Figure 3:


Figure 3:
Retrieving the Marker's New Coordinates

Sending the Data to a PHP Script

With the new coordinates in hand, you'll need to send them back to the database. The easiest way to do this is by using Ajax. To help coordinate the Ajax communication process, you'll take advantage of jQuery's $.post function to send the coordinates (you'll also need to add the jQuery library to the HTML file):

GEvent.addListener(marker, "dragend", function() {
  var point = marker.getLatLng(); 
  var lat = point.lat();
  var lng = point.lng();
  $.post(
    "update.php",
    {latitude: lat, longitude: lng},
    function(responseText){
      $("#result").html(responseText);
    },
    "html"
  );          
});

The $.post function calls the update.php script, sending along the coordinates. The PHP script is able to retrieve these coordinates by referring to them within the $_POST array. The update.php script is presented next. To stay on topic, I'll just write these coordinates to a text file rather than save them to an actual database. However, as you can see, it wouldn't take much to perform the latter task:

<?php
 
  $fh = fopen("coordinates.txt", "w");
 
  fwrite($fh, "Lat: ".$_POST['latitude']."\r\n");
  fwrite($fh, "Lat: ".$_POST['longitude']."\r\n");
 
  echo "Coordinates updated!";
 
?>

The PHP script concludes by returning a message to the caller, which will subsequently be written to a DIV titled #result.

Map-oriented Web Applications Made Easy

Using the powerful Google Maps API in conjunction with other technologies, such as jQuery and PHP, creating fascinating and flexible map-oriented Web applications is trivial. I'd love to hear from you if you're doing anything in this regard!

About the Author

Jason Gilmore is founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Formerly Apress' open source editor, Jason fostered the development of more than 60 books, along the way helping to transform their open source line into one of the industry’s most respected publishing programs. Over the years he's authored several other books, including the best-selling Beginning PHP and MySQL: From Novice to Professional (currently in its third edition), Beginning PHP and PostgreSQL: From Novice to Professional, and Beginning PHP and Oracle: From Novice to Professional.

Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer’s conference, and was a member of the 2008 MySQL Conference speaker selection board.

Jason has published more than 100 tutorials and articles within prominent publications such as Developer.com, Linux Magazine, and TechTarget.


Tags: PHP, Google Maps, Ajax, Google, services



Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel