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.

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.