One thing we need to make a decision about before we will start coding is when we should use the Haversine formula and when we should display the markers according to the borders of the map. According to this study, using the Haversine formula in a web query on a MySQL database with 800k entries might take up to 8 seconds. Therefore it will be crucial to split our jQuery code into requests concerning retrieving the data based on the Haversine formula and data within the borders of the map. In this example I won't give a complete walk through of how to measure the distance between two points (it will probably be a good subject for another example). In this example I will only show how to display data on an "moveend" event.

Let's take a look at the code. In line 1, we are executing the code after the document is loaded. I would consider it a standard procedure in writing unobtrusive JavaScript. In line 2, we define our map container, which corresponds with a HTML tag whose id equals map. In line 3, we are checking if the user’s browser is compatible with Google Map API and if it is, and our map container also exists, we can finally execute the rest of the code.

In line 5, we are instantiating our Google map and in lines 6 and 7 we are defining some controls for our map, the center (GLatLng) and zoom level (14). In line 9, we would have our code to measure the distance from given zip code and to display the markers on our map. The most interesting part of our code starts in line 14. We add a listener, which triggers on "moveend" event. In line 15, we use the getBounds() method, which returns GLatLngBounds object for us. In lines 16 to 19, we use getSouthWest() and getNorthEast() methods of our GLatLngBounds objects. This methods return GLatLng object, therefore we can directly use its methods to retrieve the geographical lengths of our south west and northeast corner. The last part is pretty simple, and I will leave it to you to adjust it to your needs. In line 20, we use the AJAX request, and we pass all geographical lengths to our php file. We assume that the response will be a valid json_encode() representation of the data retrieved from the database, and in lines 21 to 23, we add our markers to the map.

Here is the code you have been waiting for:

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

$(document).ready(function() {  
  var mapContainer = $('#map')[0];
  if (GBrowserIsCompatible()) {
    if (mapContainer) {
      var map = new GMap2(mapContainer);
      map.addControl(new GLargeMapControl);
      map.setCenter(new GLatLng(52.519015140666,13.419671058654785), 14);
 
      $('#submit').click(function() {
 
        // here goes the code handling calculatig of distance
        // truncated because it is not a part of this post
 
        GEvent.addListener(map, "moveend", function() {
          var bounds = this.getBounds();
          var swLat = bounds.getSouthWest().lat();
          var swLng = bounds.getSouthWest().lng();
          var neLat = bounds.getNorthEast().lat();
          var neLng = bounds.getNorthEast().lng();
          $.getJSON('helper.php', { swLat: swLat, swLng: swLng, neLat: neLat, neLng: neLng }, function(data) {
            var point = new GLatLng(data.lat, data.lng);
            var marker = new GMarker(point);
            map.addOverlay(marker);
          });
        });
      });	
    }
  }
});

You might ask why we are placing this code inside of jQuery's click event? The answer is simple. This way we can prevent triggering the "moveend" event, before a user uses the form. Only after he or she uses the form, our listener will react to the user's interaction with the map.

Another question might be, why we are not using GBounds.extend() method to adjust the zoom level? An answer for this question is as simple as the last one. We already defined the zoom level by passing the geographical lengths of our rectangle to the php file and since we triggered "moveend" event, we always have an actual part of the map, which a user is seeing at the point of triggering it.

I hope you will like this example. I did not want to provide the whole code for this example, because first of all I wanted to split it into two entries and second of all, I did not want to provide an example which you can copy and past, but rather give a solution for a certain problem and possibility start a discussion about doing it better. Have fun with this one.

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

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

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:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

$(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 = "
          <form action="\"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:

1
2
3
4

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

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.

After we'll be done with our example, the final result should look more or less like that:

As usually don't forget to include jQuery library in the head section of your document. Let's take a closer look at the jQuery code we will use in this example:

1
2
3
4
5
6
7
8

$(document).ready(function(){
  $('#select').change(function() {
    var option = $(this).val();
    $.get('select.php', {select:option}, function(data) {
      $('#result').html(data).hide().fadeIn(1000);
    });
  });
});

I think I don't need to remind anyone that you should place this code also in the head section of your document. Our goal is to write unobtrusive code though.

Our code is really simple this time. After the DOM is loaded we add an event listener, which will be triggered on onchange event of our drop down list with id select. If the event was triggered we save the value of chosen option in 'option' variable and use the AJAX request to get the content of the remote file, which in our case is select.php, which should be placed in the same directory. Additionally we pass an argument, which in our case is the value of the chosen option. We then use html() to past retrieved data into our div container with id result, we hide it and use fadeIn() effect to display it in a nicer way.

Here is the HTML code you should put in the body section of your document:

1
2
3
4
5
6
7
8
9

<select name="select" id="select">
	<option value="">Select</option>
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
	<option value="option4">Option 4</option>
	<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>

I don't think this code needs any further explanation. Probably, what's more important, is the content of the php file:

1
2
3
4
5
6
7
8
9
10
11

if($_GET['select'] == 'option1') {
  echo 'the option you have chosen is 1';
} elseif($_GET['select'] == 'option2') {
  echo 'the option you have chosen is 2';
} elseif($_GET['select'] == 'option3') {
  echo 'the option you have chosen is 3';
} elseif($_GET['select'] == 'option4') {
  echo 'the option you have chosen is 4';
} elseif($_GET['select'] == 'option5') {
  echo 'the option you have chosen is 5';
}

Basically we display the content according to the data passed in our AJAX request. You can do everything possible with this file, for example get the information from MySQL table. Additionally you can pass more attributes in the AJAX request, which you can get either from hidden input fields or just predefine them in the function.

You can also adjust this function to load contents from remote text files or any other files you can imagine. In the case of text files though, I would name the files using the name attribute of our drop down list, save it in the variable and pass it to the AJAX request as the file name. Have fun with this one.

One of the classes available in second version of google maps is GLatLngBounds. Instantiating this class constructs a rectangle in geographical lengths. One of the methods, called 'extend' allows us to extend this rectangle to get a perfect zoom level. It means that every time our loop will display a new marker, we will call 'extend' method, which will additionally extend the boundaries of the rectangle, so it contains that given point. An additional functionality, which will be covered by this function is an event listener, which will display info window when a user clicks on one of the markers. At the end we will set the zoom level using one of the methods (getBoundsZoomLevel()) from another class, which can be called though, without instantiating it and use the getCenter() method from GLatLngBounds to get the center of our map.

To save us some time, I decided to skip the part where we are creating our XML document, which contains all necessary information (latitude, longitude and text for info window) to display our markers, therefore if you need that part to be covered as well, just let me know. Let's take a closer look at our code:
[source:javascript]
$(document).ready(function() {
//our map container and instance of GLatLngBounds
var mapContainer = $("#map")[0];
var bounds = new GLatLngBounds();

//if browser is compatible
if (GBrowserIsCompatible()) {
//if div with given id was found
if(mapContainer) {
//instance of the GMap2 and some controls
var map = new GMap2(mapContainer);
map.addControl(new GLargeMapControl);
map.addControl(new GMapTypeControl);
map.addControl(new GScaleControl);
map.setCenter(new GLatLng(0,0),0);
}
//AJAX request
$.get('coordinates.xml',function(data) {
//we are looking for all marker and looping through them
$(data).find('marker').each(function(){
//serializing some data from the request
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
var desc = $(this).attr('desc');
var point = new GLatLng(lat,lng);
var marker = new GMarker(point);

//new marker
map.addOverlay(marker);
//extending the boundaries
bounds.extend(point);
//and the info window
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(desc);
});

});
//setting the zoom level and the center
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
});

}

});
[/source]
I hope everything is clear. In case of any question just use the comment or contact form. One more thing left to show. Here is the content of xml file:
[source:xml]







[/source]

show

Let's break it into pieces.
[source:javascript]
$(document).ready(function(){
$('.link').toggle(
function () {
if($('#box').text() == '') {
$.ajax({
url:'your_file.txt',
method:'GET',
success:function(r) {
$('.link').html('hide');
$('#box').html(r).hide().slideDown(1000);
},
error:function() {
alert('file does not exist');
}
});
} else {
$(this).html('hide');
$('#box').slideDown(1000);
}
},
function () {
$(this).html('show');
$('#box').slideUp(1000);
}
);
});

[/source]
Because we want to write unobtrusive code, we want that our code should be executed whenever the DOM is ready. On each element with class 'link' we will toggle between two functions. In the first function we check, if our element with id 'box' is empty. If it is we use AJAX request to load the content from a remote file (in our case your_file.txt). For that reason you can use any other file. You can even pass parameters and request content relevant only for your case. For that reason you would have to add extra parameter 'data' in AJAX request of this function.

If the request was successful, we replace 'show' with 'hide', past the requested content in our container with id 'box', hide it and slide it down to get a nice visual effect. If this request retrieves an error, an alert box with information that the file wasn't found will be displayed. This function does the if - else check only because we want to do the AJAX request only once.

The second function is pretty simple. It basically replaces 'hide' with 'show' again and it slides up our div container. If a user clicks on 'show' button again, we wont need to use AJAX request anymore, because the text was already past in our DOM. Here is the HTML and CSS code for the body section of our document:
[source:HTML]

show

[/source]
If you want a nice effect of an arrow pointing up or down depending on the case, you can extend this function with some class replacements. Have fun with playing around with this one.

How to include jQuery libraries into your document you can read in this post. After you've done that in the body section you need to include this three fields (year, month, day), which will handle user input.

<label for="year">Year</label>
	<select name="year" id="year">
	<option value=""></option>
	<option value="1959">1959</option>
	...
	<option value="1986">1986</option>
	</select>
<label for="month">Month</label>
	<select name="month" id="month" disabled="disabled">
	<option value=""></option>
	<option value="1">January</option>
	...
	<option value="12">December</option>
	</select>
<label for="day">Day</label>
	<select name="day" id="day" disabled="disabled">
	<option value=""></option>
	</select>

If you don't feel like copying the drop down for each year you can user "for" loop, which will do the work for you. In our case for year drop down we will have to paste this code:

for($i=1959;$i<=1986;$i++) {
	echo "<option value=\"$i\">$i</option>";
}

We can actually do the same thing for months drop down, but in this case we will have to save all the months in an array and use "foreach" loop.

$month = array('January','February','March','April','May','June','July','August','September','October','November','December');
$i=1;
foreach($month as $months) {
	echo "<option value=\"$i\">$months</option>";
	$i++;
}

Easy, isn't it?:) Let's start to use some magic to make our example work. As you can notice I disabled month and day fields and will enable them first after we will get any input from user. Let's take a look at the code, which will enable those fields for us. Don't forget to put it in the head section of your document.

$(document).ready(function(){
	$('#year').change(function(){
		$('#month').removeAttr('disabled');
	});
});

This simple code will be executed after the DOM is loaded and will trigger the removeAttr function on our drop down with id 'month' on onchange event of id element 'year'. Let's move further and see what happens, if our user chooses a month.

$(document).ready(function(){
	$('#year').change(function(){
		$('#month').removeAttr('disabled');
	});
	$('#month').change(function(){
		var leap_year = $('#year').val();
		var leap_days = (leap_year%4 == 0) ? 29 : 28;
		$.ajax({
			data:'month='+$(this).val()+'&leap='+leap_days,
			url:'leap_helper.php',
			type:'POST',
			error:function(){
				alert('something went wrong');
			},
			success:function(r){
				$('#day').removeAttr('disabled').html(r);
			}
		});
	});
});

As you can see we trigger a function on onchange event for id element 'month'. We read the value of the year drop down and save it in as leap variable. We then use modulo operator to check, if the division by four is equal zero. If it is, we assign 29 days to variable leap_days, in other case 28. We then call AJAX function of jQuery and prepare our data string, which we will use to pass the information about the month and the amount of days in leap year to our PHP script. To send the data we will use the POST method. If our script encounters error, we will alert a message, that something went wrong. (In this place you can do, whatever you feel like. For example it would be nice, if you would display a nice error message above the date input fields.) If we will get a success response from our script we will firs remove the disable attribute from the element with id 'day' and paste a drop down with the amount of days.

Let's take a closer look at our PHP file. You need to save it in the same directory and give it a name 'leap_helper.php'. If you want to use other names or directory structure, you need to change its' name in jQuery function.

$day_30 = array(4,6,9,11);
$day_31 = array(1,3,5,7,8,10,12);
$day_28 = array(2);
$day = '';
if(in_array($_POST['month'],$day_30)) {
	for($i=1;$i<31;$i++) {
	$day .= "<option value=\"$i\">$i</option>\n";
	}
} elseif(in_array($_POST['month'],$day_31)) {
	for($i=1;$i<32;$i++) {
		$day .= "<option value=\"$i\">$i</option>\n";
	}
} elseif(in_array($_POST['month'],$day_28)) {
	for($i=1;$i<=$_POST['leap'];$i++) {
		$day .= "<option value=\"$i\">$i</option>\n";
	}
}
echo $day;

In our PHP file we save three arrays for months, with 30, 31 and 28 or 29 days and initialize our $day variable. After that we perform a simple check, if the month our user choose is in the array of months with different amount of days. If it is, then we create a string with exact amount of days for chosen month. In our last case we use additionally the leap variable to display amount of days in February according to the year chosen by the user.

I hope this short explanation will help you in developing your own application. Obviously to check, if 1644 was a leap year, it wont be enough to divide it by four. For this kind of case you need a little bit more complicated formula. For our case it's just enough, if you divide by four and pass this value to our PHP script, which will create a string for you. Have fun with this script, and as usually I'm waiting for your responses. Cheers!