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!

You can also see working demo here

Let's start with including some necessary libraries. I know this might be obvious for almost all of you, but I want to make it as clear as possible for each one of you reading this post. Please add this two lines in the head section of your document. Please don't forget that we will use v2 of GMap in this example. You can download the jQuery library from their official site www.jquery.com. To get the google Maps API key for you your site, you should go to this address and you can sign up for a key for free.

1
2

<script src="jquery.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOURKEY" type="text/javascript"></script>

You can also include the latest jQuery library directly from their site adding this code in the header of your document.

1

<script src="http://code.jquery.com/jquery-latest.js"></script>

I don't wont to discuss the advantages or disadvantages of both methods but if you want to know more about it you should check the cache possibilities of your browser. In our example I will use the latest code available from jQuery site.

Let's start to break my code into pieces and explain what it does. First we will define a ready event to our page and declare some global variables which we will use later in our function, so the code defined in the ready event will be executed after the DOM will be loaded. You need to place this code in the head section of your document.

1
2
3
4
5

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
});

The first thing we need to do is to check if the client's browser is compatible with google maps at all. If this check returns true, we use jQuery to define a place holder for our map. In our case it will be a div tag with an id map. We also assume in this example that it will be the first element in our DOM. We will use Berlin as our example city. If jQuery finds our place holder it initializes the GMap and displays it in our div tag. We set the longitude and latitude in the center of Berlin and we are defining a default zoom level. We add some controls to allow our user to manipulate the map and we we are done with the first step of just displaying the map without including the onload even in the body tag of our document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        if(m) {		
            var map = new GMap2(m);
            var start = new GLatLng(52.519563,13.414306);
            var zoomLevel = 10;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
        }
	}
});

In the next step we want to give our user a possibility to choose the location by simply reading his' or hers' input. To accomplish this task we add an event listener, which will be triggered when a user clicks on our map. First we perform a check if a marker doesn't exist on our map and if it does we remove. After that we check if a point is defined and if it is we add an overlay, which displays the marker and save the latitude an longitude in our hidden input fields (the HTML code for this example will be shown at the end). We will need this information later to save it in the database.

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

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        if(m) {		
            var map = new GMap2(m);
            var start = new GLatLng(52.519563,13.414306);
            var zoomLevel = 10;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
            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);
                    $('#lng').attr('value',point.x);
                    $('#lat').attr('value',point.y);
                }
            });
        }
    }
});

In the last step we add an event listener, which will be triggered when a user use our drop down menu to choose a district. As I stated before, a user has a form to fill out where he is forced to choose the district of a city. We will use AJAX to retrieve this information from an external php file (map_district.php) to get the geographical location of the districts. It splits the string, which it gets and performs a check, if a marker exists already or not. After that it adds a marker to the map, increases the zoom level and overwrites the location in hidden input tags.

(How to determine the longitude and latitude of a certain place for free, you can read another example of mine here .)

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

$(document).ready(function() {
    var mark;
    var pointA;
    var pointB;
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        if(m) {		
            var map = new GMap2(m);
            var start = new GLatLng(52.519563,13.414306);
            var zoomLevel = 10;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
 
            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);
                    $('#lng').attr('value',point.x);
                    $('#lat').attr('value',point.y);
                }
            });
            $('#city').change(function(){
                var district = 'district='+$(this).val();
                $.ajax({
                    type: 'POST',
                    data: district,
                    url: 'map_district.php',
                    success: function(r) {
                        var cord = r.split("|");
                        if(mark) {
                            map.removeOverlay(mark);
                        }
                        pointB = new GLatLng(cord[0],cord[1]);
                        mark = new GMarker(pointB);
                        map.addOverlay(mark);
                        map.setCenter(pointB, 14);
                        $('#lat').attr('value',cord[0]);
                        $('#lng').attr('value',cord[1]);
                    }
                });
            });
        }
    }
});

This way even if a user will try to erase a marker, we will still have an information about the last placed marker, which we can save in our database. Last thing I need to mention is the content of php and html files.

I will just reduce this example to two districts, but you can add as many as you want. Basically we call this php file in our AJAX request and use POST method to retrieve the location, which we later use to place a marker.

if($_POST['district']=="Charlottenburg") {
    $lat = "52.51120638909939";
    $lng = "13.299808502197266";
} elseif($_POST['district']=="Friedrichshain") {
    $lat = "52.51360922969275";
    $lng = "13.442888259887695";
}
echo $lat."|".$lng;

In the body section of your document you need to place simple drop down list, a div tag with id map and two hidden input fields.

1
2
3
4
5
6
7

<select name="city" id="city">
    <option value="Charlottenburg">Charlottenburg</option>
    <option value="Friedrichshain">Friedrichshain</option>
</select>
<div id="map" style="width:400px;height:400px;"></div>
<input type="hidden" id="lng" name="lng" value="" />
<input type="hidden" id="lat" name="lat" value="" />

That's all. If you want to download the files you can do it here. I'm waiting for your feedback.