designing4u.de » XML

Google Maps and jQuery – calculating distance between two points

Wojtek — Tue, 11 Nov 2008 10:39:43 +0000

It has been a long time since I wrote my last example, but I've been really busy. Lately I got a request to write an example about calculating the distance between two points using KML file. What I will show you in this example is how to provide an user two drop down fields, which will be build according to provided KML file. Choosing each field will show a marker on the map. Changing the drop down field will cause removal of an according marker and placement of it in a new location. Also the markers will have two different colors, so an user can differentiate between starting and ending point. As the last functionality we will add a button. After an user clicks on the button, our function will calculate the rout and display the distance in kilometers. Let's start with a simple class which we will use to display drop down field and retrieve the coordination of requested place.

To see, how our final solution will look like, go here

1. Geo Class - Geo.class.php

class Geo
{
 
    private $xml;
 
    protected function _init()
    {
        $this->xml = simplexml_load_file('geo.xml', 'SimpleXMLElement');
    }
 
    public function getDropDown($id, $option = array())
    {
        $this->_init();
 
        $select = '';
 
        return $select;
    }
 
    public function getLocation($identifier)
    {
        $this->_init();
 
        $coordinates = array();
 
        foreach ($this->xml->children() as $child)
            if ($child->name == $identifier) {
                $temp = explode(',', $child->Point->coordinates);
                $coordinates = array(
                                    'lat' => $temp[0],
                                    'lng' => $temp[1]
                );
            }
 
        return $coordinates;
    }
}

It wasn't really necessary to put this functions into a class, but it is just a habit We define a protected function _init(), which we call every time we want to use our KML file to retrieve information out of it. The function simplexml_load_file initializes an SimpleXMLElement object for us, which we can use later. The function getDropDown with the first mandatory argument and the second optional will be responsible for displaying the drop down field for us. I think I don't need to explain it in detail. The last function getLocation will retrieve the latitude and longitude from KML file. So let's move to index.php file, which will be the core of this example.

2. Core file - index.php

1 2	include('Geo.class.php'); $geo = new Geo();

Before we send any headers we include our Geo.class.php file and initialize our Geo class. After that goes the usual tag tags and the google maps and jQuery scripts. In the section of our document goes the actual jQuery part.

$(document).ready(function() {  
  var mapContainer = $('#map')[0];
  var markerStart;
  var markerEnd;
  if(GBrowserIsCompatible()) {    
    if(mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);  
      map.setCenter(new GLatLng(52.519015140666,13.419671058654785), 14);
 
      $('#start').change(function() {
        var location = $(this).val();
 
        if (location == '')
          return;
 
        $.getJSON('helper.php', { location: location }, function(data) {
          if (markerStart)
            map.removeOverlay(markerStart);
 
          pointA = new GLatLng(data.lat, data.lng);
          markerStart = new GMarker(pointA);
          map.addOverlay(markerStart);
        });
      });
 
      $('#end').change(function() {
        var location = $(this).val();
 
        if (location == '')
          return;
 
        $.getJSON('helper.php', { location: location }, function(data) {
          if (markerEnd)
            map.removeOverlay(markerEnd);
 
          var blueIcon = new GIcon(G_DEFAULT_ICON);
          blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
          var markerEndOptions = { icon: blueIcon };
 
          pointB = new GLatLng(data.lat, data.lng);
          markerEnd = new GMarker(pointB, markerEndOptions);
          map.addOverlay(markerEnd);
        });
      });
 
      $('#submit').click(function() {
        if (window.pointA === undefined || window.pointB === undefined) {
          alert("You need to choose start and end");
          return;
        }
 
        var directions = new GDirections(map);
        route = Array(pointA, pointB);
 
        GEvent.addListener(directions, 'load', function() {
          var dist = directions.getDistance().html;
          $('#distance').html(dist);
        });
 
        directions.loadFromWaypoints(route);
      });
    }
  }
});

Maybe it is long but pretty straight forward. As you can read in my other examples, we first initialize jQuery, so it starts after our document is loaded. After that we define our map container and our markers. After we check if our browser is compatible and our map container exists, we initialize the map with couple options (large controls, zoom level = 14 and the center of the map).

We add two event listeners, which are triggered on onchange event of our drop downs (with id start and end respectively, the html code will follow). If you use the $option parameter in getDropDown function for displaying custom blank option, we check if the user chose this option and return false if he did. If he chose a valid option, we use an AJAX request and retrieve the geolocation from our helper file.

After our call returns some data, we check, if we have already any markers saved in our map and if we do, we first remove them and then place a new marker according to the option chosen in the drop down.

We repeat the same for the drop down with id 'end'. Actually we could have put this two events into a separate function, but to make this example clear I purposely didn't do that.

The last event listener is triggered, when a user clicks on a 'calculate route' button. First we check, if both points were placed by the user, and if not we display an alert, that he or she has to provide valid starting and ending point. This check might not work in IE, therefore you might need to do some changes, so it also works in IE.

We initialize GDirections Class and define our route with starting and ending point. I also use the getDistance method to display the amount of kilometers between this two points. As the last thing we need to do is to display the directions on the map and voila, we are done

What we still need it the rest of index.php file and our helper, and KML file.


        Start  echo $geo->getDropDown('start', array('include_custom' => 'please choose...')); ?>
        Stop  echo $geo->getDropDown('end', array('include_custom' => 'please choose...')); ?>

Pretty straight forward. We display our navigation with an empty option 'please choose...', the 'calculate route' button and containers for distance and map.

3. Our helper - helper.php

1
2
3

include('Geo.class.php');
$geo = new Geo();
echo json_encode($geo->getLocation($_GET['location']));

Pretty simple, isn't it Just initialize the class and call the method to retrieve location with the location argument used in the _GET request.

4. KML file - geo.xml

 version="1.0" encoding="UTF-8"?>
 xmlns="http://earth.google.com/kml/2.2">
  >
    >Alexanderplatz>
    >Center of Berlin>
    >
      >52.52238370531909,13.409671783447266>
    >
  >
  >
    >Frankfurter Tor>
    >A nice place to live>
    >
      >52.51595970749194,13.4527587890625>
    >
  >
  >
    >Warschauerstr.>
    >Place to go and spend some time with friends>
    >
      >52.508568336719854,13.451085090637207>
    >
  >
  >
    >Revelerstr.>
    >Cassiopeia Club>
    >
      >52.50721006978328,13.457050323486328>
    >
  >
  >
    >Frankfurter Allee>
    >Shopping Center>
    >
      >52.513818166144006,13.474087715148926>
    >
  >
>

It is a file I prepared by myself. As far as I know, you can create them using the Google Earth application. Probably they can be way more complex than this one. But I guess it will be a nice subject for next example Good luck with this one and as usually, in case of any question, you know how to find me. Cheers!

Google Maps, jQuery and XML – saving markers with user input

Wojtek — Mon, 04 Aug 2008 08:59:54 +0000

I just got a first request from a user of my site to help him with his problem. Let me describe it in detail. Assume that a user is visiting your site and he or she wants to place a marker on a google map displayed on your page. Additionally, we want to get some input from our user, therefore after he or she clicks on the google map we will provide an info could with a form. Our user will be able to provide a name, a message and a link and submit it. I didn't want to make this example too complicated, therefore handling the links or uploading the files you will have to solve by yourself. Let's move to the code.

Our final solution will look more or less like this.

In our example we will use two file types - PHP and XML. Our PHP file will be responsible for saving the user input in XML file and displaying the google map with all saved markers. Our XML file will be basically a place, where we will save all the markers saved by an user. It is worth to mention that you can easily replace the XML file with any kind of a database. If you do so, you will for example have possibility to approve each marker saved on your page. Additionally, if you have some kind of authentication system on your site, you can also save according username of a person who placed a marker on your site and provide some kind of statistics for your users. It's up to you, how you will use this code.

After some initial explanation we can move to our PHP file. Let's start with the header of our file:

1. PHP file

if (isset($_POST['submit'])) {
  $fh = file_get_contents('markers.xml');
 
  try {
    $xml = new SimpleXMLElement($fh);
  } catch (Exception $e) {
    echo $e->getMessage();
  }
 
  $marker = $xml->addChild('marker');
  $marker->addAttribute('lat', $_POST['lat']);
  $marker->addAttribute('lng', $_POST['lng']);
  $marker->addAttribute('msg', utf8_encode($_POST['msg']));
  $marker->addAttribute('name', utf8_encode($_POST['name']));
  $marker->addAttribute('link', utf8_encode($_POST['link']));
 
  $fp = fopen('markers.xml','w');
  fwrite($fp, $xml->saveXML());
  fclose($fp);
  header('Location:index.php');
}

We use PHP function file_get_contents() to load the content of our XML file. Our XML file would be an empty XML file with markers element, which will be a holder for our markers. We initialize a PHP build in class SimpleXMLElement with our file and catch an exception if any error occur. If our user clicks on a save button (the code of this form will follow) we create a child element with according attributes and then save it as a new XML file.

This way we will add new markers to our XML file without loosing any previous information saved in our XML file. After our file is saved we redirect our user to the index page to prevent reloading of the page and saving multiple markers with the same information. I know it is not the cleanest way to do that, but it is just an example which should serve as a blueprint for your code.

You can notice that I use utf8_encode() function to encode our user input into correct charset. Because I encountered major problems with foreign characters and our final solution should work for standard characters as well as for special characters, that is a necessary step to handle this problem. The only thing you should keep in mind is to set the charset of your site to UTF-8.

Don't forget to put that code before the head section of your PHP file, because otherwise you will get an error that the header were already send.

Let's take a look at our jQuery function:

$(document).ready(function() {
 
  var mark;
  var pointA;
 
  if (GBrowserIsCompatible()) {
    var m = $("#map")[0];
 
    if(m) {
 
      var map = new GMap2(m);
      var start = new GLatLng(63.13450320833446,16.69921875);
      var zoomLevel = 5;
      map.setCenter(start, zoomLevel);
      map.addControl(new GSmallMapControl());
 
      $.get('markers.xml',function(data) {
        $(data).find('marker').each(function(){
          var lat    = $(this).attr('lat');
          var lng    = $(this).attr('lng');
          var html   = $(this).attr('name')+" ";
          html      += $(this).attr('msg')+" ";
          html      += $(this).attr('link');
          var point  = new GLatLng(lat,lng);
          var marker = new GMarker(point);
 
          map.addOverlay(marker);
 
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
 
        });
 
      });
 
      GEvent.addListener(map, 'click', function(overlay, point){
        if(mark) {
          map.removeOverlay(mark);
        }
        if(point) {
          pointA = new GPoint(point.x, point.y);
          mark = new GMarker(pointA);
          map.addOverlay(mark);
          map.getCenter(point);
          var lat = point.y;
          var lng = point.x;
          var form = "
          "index.php\"" method="\"post\"">" +
          "<input name="\"lat\"" type="\"hidden\"" value="\""+lat+"\"" />"+
          "<input name="\"lng\"" type="\"hidden\"" value="\""+lng+"\"" />"+
          "Name:
          <input name="\"name\"" type="\"text\"" value="\"\"" />"+
          "Msg:
          <input name="\"msg\"" type="\"text\"" value="\"\"" />"+
          "Link:
          <input name="\"link\"" type="\"text\"" value="\"\"" />"+
          "<input name="\"submit\"" type="\"submit\"" value="\"save\"" />"+
          "form>";
          map.openInfoWindowHtml(point,form);
        }
      });
    }
  }
});

In the first part we declare two variables pointA and mark which will later serve to retrieve the longitude and latitude of our marker. We will also reduce the ability of a user to place several markers at the same time.

We check if our browser is compatible with google maps and we look for a place holder for our map. If both of the conditions are fulfilled we display our map and use AJAX request to display all the markers saved in our XML file. We also add an event listener which is triggered every time a user clicks on an existing marker. If it is a case, we display an info cloud with information saved by the user.

In the second part of our function we add another event listener, which is triggered every time a user places a new marker. In our info cloud we will display a form which I mentioned before and save the longitude and latitude in hidden fields. After our user clicks a save button the information from the form will be processed by our PHP file which will create another marker and display it on our google map.

The last part is our XML file:

2. XML file:

 version="1.0" encoding="utf-8"?>
>
 lat="64.4348920430406" lng="15.205078125" msg="Msg" name="Name" link="yes!"/>
>

As I said before this example is just a blueprint and should be extended by user input validation. As I also said before, you don't really need to use XML file and you can also implement an approval system of each marker placed on your site. You will have to save your information in a database though. You can use my post about displaying a simple navigation to get the idea, how to create an XML file based on information you retrieve from database. I hope this will be helpful. I'm waiting for your feedback.

Google maps, jQuery and XML – displaying a simple navigation

Wojtek — Thu, 22 May 2008 09:04:26 +0000

After I wrote my last example yesterday, I just realized, how easy you can add a simple navigation to your map, whereas after you click on the link an information window will be provided right above the according marker. I think it's a nice way to provide your visitors a possibility to choose what they want to see instead of randomly clicking on markers to find out what are they displaying. This time I will also show, how you can easily create an XML document using DomDocument class, which should be installed by default in your PHP5 version, which we will later use to display the markers.

If you want to see a working demo of this example just click here.

Detailed description of jQuery code you can find in my previous post about setting boundaries for google map with more markers using jquery, therefore in this example I will only cover the parts of the code, which weren't explained in previous post. Let's take a closer look at the code, which will generate an XML document. You need to place this code in a separate file, which in our case will be xml.php.

You can create your XML document on many different ways. I will show you here an easy and a nice way, how to do that. Let's start with the nice way, which uses DomDocument class.

$db_host = "localhost";
$db_user = "user";
$db_pass = "pass";
$db_name = "dbname";
 
$connect=mysql_connect($db_host, $db_user, $db_pass) or die ("No connection to DB");
mysql_select_db($db_name) or die("No connection to DB");
 
$dom = new DomDocument('1.0','UTF-8');
$element = $dom->createElement('markers');
$dom->appendChild($element);
 
$sql = mysql_query("SELECT * FROM google_address");
 
while($row = mysql_fetch_assoc($sql)) {
  $marker = $dom->createElement('marker');
  $element->appendChild($marker);
  $marker->setAttribute('lat',$row["lat"]);
  $marker->setAttribute('lng',$row["lng"]);
  $marker->setAttribute('link',utf8_encode($row["link"]));
  $marker->setAttribute('desc',utf8_encode($row["desc"]));
}
 
echo $dom->saveXML();

All the information we are using in this example is stored in MySQL database, therefore we will start with connecting to MySQL database. You will need to create a table with at least four fields (lat, lng, link and desc). The first two fields represent geographical lengths, the third one represents the link name, which will be later displayed in the navigation and the fourth field represents description, which will be later displayed in our info window.

After that we create an instance of our DomDocument class and initialize it with the XML version and set the default encoding (In our case version 1.0 with encoding set to UTF-8). After that we create an element called markers, which will be a root element for our markers and insert it as a child into our XML document.

After that we select all element from our MySQL table and loop through them. In our loop we first create a new element called marker, append it as a child into our root element and set the necessary attributes. After our loop is done with all the results we just echo our XML document using saveXML method. This example only shows, how to display all results from database. In your AJAX request you can pass some attributes to filter the data.

The easier method is based on creating a file called coordinates.xml. You will need to place this code before you do your AJAX request, because otherwise you will get 404 error.

$db_host = "localhost";
$db_user = "user";
$db_pass = "pass";
$db_name = "dbname";
 
$connect=mysql_connect($db_host, $db_user, $db_pass) or die ("No connection to DB");
mysql_select_db($db_name) or die("No connection to DB");
 
$sql = mysql_query("SELECT * FROM google_address");
 
$text = "xml version=\"1.0\" encoding=\"UTF-8\"?>";
$text .= "";
while($row = mysql_fetch_assoc($res)) {
  $text .= "\"".$row["lat"]."\" lng=\"".$row["lon"]."\" html=\"".$row["description"]."\"  label=\"".$row["street"]."\" />\n";
}
$text .= "";
 
$file = "coordinates.xml";
$fh = fopen($file, "w");
fputs($fh, $text);
fclose($fh);

This way you just create a string, which you put in an XML file. I don't think that this method needs a further explanation. It's disadvantage is that you cannot really pass any attributes to filter the data.

And finally, what you've been waiting for, our jQuery code for this example:

$(document).ready(function() {
 
  var mapContainer = $("#map")[0];
  var bounds = new GLatLngBounds();
  var markers = [];
  var descs = [];
  var navi ='';
  var i = 0;
 
  if (GBrowserIsCompatible()) {
 
    if(mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);
      map.addControl(new GMapTypeControl);
      map.addControl(new GScaleControl);
      map.setCenter(new GLatLng(0,0),0);
    }
 
    $.get('xml.php',function(data) {
      $(data).find('marker').each(function(){
        var lat    = $(this).attr('lat');
        var lng    = $(this).attr('lng');
        var link   = $(this).attr('link');
        var desc   = $(this).attr('desc');
        var point  = new GLatLng(lat,lng);
        var marker = new GMarker(point);
        markers[i] = marker;
        descs[i] = desc;
        navi += '+i+'">'+link+'
';
        map.addOverlay(marker);
        bounds.extend(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(desc);
        });
        i++;
      });
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
      $('#navi').html(navi);
      $('.click').click(function() {
        var id = $(this).attr('id');
        markers[id].openInfoWindowHtml(descs[id]);;
      });
    });	
  }		
});

The only difference between this and my previous code is that we save all markers and descriptions in an array and create a string, which we use to display our navigation. After our loop is done with the markers provided by xml.php file, it displays the navigation. We also add an event listener, which is triggered, after our visitor clicks on the navigation link. When the even is triggered an information window will be displayed above according marker.

The only thing, which you need to make this code work is the HTML code:

1 2	<div id="map" style="width:1000px; height:650px;float:left;"></div> <div id="navi"></div>

That's all. I hope this code will help you to make your site more interesting for your visitors. Have fun with it.