designing4u.de Yet Another Coding Blog

Google maps, jQuery and XML – displaying a simple navigation

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$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 .= "<markers>";
while($row = mysql_fetch_assoc($res)) {
  $text .= "<marker lat=\"".$row["lat"]."\" lng=\"".$row["lon"]."\" html=\"".$row["description"]."\"  label=\"".$row["street"]."\" />\n";
}
$text .= "</markers>";
 
$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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

$(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 += '<div class="click" id="'+i+'">'+link+'</div>';
        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.