2008s on Mika Tuupola

Introduction to Marker Clustering With Google Maps

Tue, 04 Nov 2008 00:00:00 +0000

Heads up! This article was written in 2008. The theory itself is still good but the demos are currently broken.

Static Maps API has URL length limit of around 2048 characters. You can hit this limit quickly when adding lot of markers. You can keep URL short by clustering markers together.

Square Based Clustering

Clustering is usually done by dividing map to squares. Square size depends on map zoom level. Markers inside a square are then grouped into cluster. This technique has some limitations. Look at the following image.

Two markers are close to each other. In fact they are so close they are overlapping. Both markers are also the only marker inside their square. Because markers are in separate square they wont be clustered.

Distance Based Clustering

We can also group markers together based on their distance from each other. We could cluster all markers inside 10 kilometer radius together. There is one problem with this approach. Kilometers (and miles) have different meaning in different zoom levels. In zoomed in map it might mean 100 pixels. In zoomed out maps one kilometer might be only one pixel.

There is only one distance unit which does not have this problem: pixels in current zoom level. One pixel on screen is always one pixel on screen. For example we want to cluster all markers which are 20 pixels from each other. I chose 20 pixels because it happens to be the distance after which markers start to overlap each other.

Now the two markers would be clustered since they are inside 20 pixel radius.

Distance Between Two Coordinates on Earth

Distance between two points on earth can be calculated in several ways. Haversine formula is reasonably accurate and widely used. It assumes earth is spherical (in reality earth is slightly ellipsoid). This causes accuracy to be +-2 km when calculating distances of around 20.000 km. 6371.0 km is used as average radius of earth.

Below is PHP implementation of Haversine formula:

function haversineDistance($lat1, $lon1, $lat2, $lon2) {
    $latd = deg2rad($lat2 - $lat1);
    $lond = deg2rad($lon2 - $lon1);
    $a = sin($latd / 2) * sin($latd / 2) +
            cos(deg2rad($lat1)) * cos(deg2rad($lat2)) *
            sin($lond / 2) * sin($lond / 2);
            $c = 2 * atan2(sqrt($a), sqrt(1 - $a));
    return 6371.0 * $c;
}

But didn’t wee need distance in pixels instead? For that we can use Pythagoras' theorem. Pythagoras’ theorem uses cartesian (pixel) coordinates. Some Mercator magic can be used to convert latitude and longitude to pixel x and y values.

You might wonder where did number 268435456 come from? It is half of the earth circumference in pixels at zoom level 21. You can visualize it by thinking of full map. Full map size is 536870912 x 536870912 pixels. Center of the map in pixel coordinates is 268435456,268435456 which in latitude and longitude would be 0,0.

define('OFFSET', 268435456);
define('RADIUS', 85445659.4471); /* $offset / pi() */

function lonToX($lon) {
    return round(OFFSET + RADIUS * $lon * pi() / 180);
}

function latToY($lat) {
    return round(OFFSET - RADIUS *
                log((1 + sin($lat * pi() / 180)) /
                (1 - sin($lat * pi() / 180))) / 2);
}

function pixelDistance($lat1, $lon1, $lat2, $lon2, $zoom) {
    $x1 = lonToX($lon1);
    $y1 = latToY($lat1);

    $x2 = lonToX($lon2);
    $y2 = latToY($lat2);

    return sqrt(pow(($x1-$x2),2) + pow(($y1-$y2),2)) >> (21 - $zoom);
}

Now we have all needed mathematics in place. What to do with them?

Cluster Markers Together

Let’s write example clusterer function. It takes three parameters:

Array of lat and lon locations.
Distance in pixel inside which markers will be clustered.
Current map zoom level.

Function will return another array where coordinates closer than $distance are clustered together.

function cluster($markers, $distance, $zoom) {
    $clustered = array();
    /* Loop until all markers have been compared. */
    while (count($markers)) {
        $marker  = array_pop($markers);
        $cluster = array();
        /* Compare against all markers which are left. */
        foreach ($markers as $key => $target) {
            $pixels = pixelDistance($marker['lat'], $marker['lon'],
                                    $target['lat'], $target['lon'],
                                    $zoom);
            /* If two markers are closer than given distance remove */
            /* target marker from array and add it to cluster.      */
            if ($distance > $pixels) {
                printf("Distance between %s,%s and %s,%s is %d pixels.\n",
                    $marker['lat'], $marker['lon'],
                    $target['lat'], $target['lon'],
                    $pixels);
                unset($markers[$key]);
                $cluster[] = $target;
            }
        }

        /* If a marker has been added to cluster, add also the one  */
        /* we were comparing to and remove the original from array. */
        if (count($cluster) > 0) {
            $cluster[] = $marker;
            $clustered[] = $cluster;
        } else {
            $clustered[] = $marker;
        }
    }
    return $clustered;
}

We can now test clusterer function with array of coordinates.

$markers   = array();
$markers[] = array('id' => 'marker_1',
                    'lat' => 59.441193, 'lon' => 24.729494);
$markers[] = array('id' => 'marker_2',
                    'lat' => 59.432365, 'lon' => 24.742992);
$markers[] = array('id' => 'marker_3',
                    'lat' => 59.431602, 'lon' => 24.757563);
$markers[] = array('id' => 'marker_4',
                    'lat' => 59.437843, 'lon' => 24.765759);
$markers[] = array('id' => 'marker_5',
                    'lat' => 59.439644, 'lon' => 24.779041);
$markers[] = array('id' => 'marker_6',
                    'lat' => 59.434776, 'lon' => 24.756681);

$clustered = cluster($markers, 20, 11);

print_r($clustered);

If you run the code you can see how marker_3, marker_4 and marker_6 are clustered together. This can better be visualized as map screenshot before and after clustering. Blue marker is a cluster.

Real Life Usage?

Obviously making an array of coordinates into a new array of coordinates is not really usefull. However the first clusterer for Static Maps I committed to GitHub uses previously described technique. Clustering a static map takes only two extra lines of code. First create a cluster. Then add it to the map object. Rest is taken care automatically.

$clusterer = Google_Maps_Clusterer::create('distance');
$map->setClusterer($clusterer);

You can see it in action in capital cities of the world map. City locations are parsed from KML file. Note that in closer zooms locations are slightly off. Coordinates have only two decimals of latitude and longitude.

Currently I have demo code only for Static Maps. Serverside clustering for Google Maps API will follow soon. Thats a promise. Cross my heart.

Zoom and Pan Controls With Static Maps

Fri, 24 Oct 2008 00:00:00 +0000

Heads up! This article was written in 2008 and it exists mostly for historical purposes.

Most of the code from previous Static Maps experiments is now put into one clean package. Previously I showed you how to work with markers and bounds. Now we go forward and add zoom and pan controls. It takes only few lines of code. If you just started reading the series check the theory how it works. As a bonus lets add infowindows / bubbles too.

Note! Image above is just a screenshot. You can test final result in the demo.

Create Map and Some Markers

Start by creating new map object and set the size. We also need to give our API key. Markers are positioned on map using location object. Location can be latitude and longitude represented by Google_Maps_Coordinate object. Location can also be map x and y represented by Google_Maps_Point object.

Because we put markers to map the center is calculated automatically. There is no need to call $map->setCenter(). We can also calculate the closest possible zoom with $map->zoomToFit().

require_once 'Google/Maps.php';

$map = Google_Maps::create('static');
$map->setSize('540x300');
$map->setKey(API_KEY);

$coord_1 = new Google_Maps_Coordinate('58.378700', '26.731110');
$coord_2 = new Google_Maps_Coordinate('58.379646', '26.764090');

$marker_1 = new Google_Maps_Marker($coord_1);
$marker_2 = new Google_Maps_Marker($coord_2);

$map->addMarker($marker_1);
$map->addMarker($marker_2);
$map->zoomToFit();

Add Zoom and Pan Controls

Controls are created using Google_Maps_Control::create() factory method. After creating a control you must attach it to a map. This alone is not enough. When panning and zooming new map center or zoom value is passed in query string. Last line passes the values from URL to the map object.

$zoom = Google_Maps_Control::create('zoom');
$map->addControl($zoom);
$pan = Google_Maps_Control::create('pan');
$map->addControl($pan);

$map->setProperties($_GET);

Note! Image above is just a screenshot. You can test working controls in the demo.

Add Infowindows / Bubbles

Infowindows (or bubbles as they are often referred) are represented by Google_Maps_Infowindow object. You can set the content in constructor or using $bubble->setContent() method. Bubbles have a marker attached to them. Clicking the marker will open the infowindow. As with all other items you must attach them to map.

$bubble_1 = new Google_Maps_Infowindow('Foo Bar');
$bubble_2 = new Google_Maps_Infowindow('Pler pop');

$bubble_1->setMarker($marker_1);
$bubble_2->setMarker($marker_2);

$map->addInfowindow($bubble_1);
$map->addInfowindow($bubble_2);

Note! Image above is just a screenshot. You can test working infobubbles in the demo.

Where’s the Source?

If you want to play around with code you can get from github. Patches, improvements and suggestion are welcome.

$ git clone git://github.com/tuupola/php_google_maps.git
$ wget http://github.com/tuupola/php_google_maps/zipball/master

Simple Static Maps With PHP

Fri, 10 Oct 2008 00:00:00 +0000

Heads up! This article was written in 2008 and it exists mostly for historical purposes.

Lately I have been playing with Google Static Maps API a lot. Writing the same things again and again is tedious job. I decided to put the code together as one clean extendable package. Writing object oriented interface for generating URL is trivial. Real meat is having working zoom and pan controls on static map ~~with just 9 lines of code~~ (demo now includes also clickable markers and infowindows).

Code is still alpha quality. API might change any time. But here is a quick walkthrough of current features. We will build the map you see above step by step.

Create a Map Object

Map object is created using Google_Maps::create('static') factory method. If no markers are set you also need to set the center of the map.

require_once 'Google/Maps.php';

$map = Google_Maps::create('static');

$map->setSize('540x300');
$map->setCenter(new Google_Maps_Coordinate('58.368488', '26.768908'));
$map->setZoom(8);
$map->setKey(API_KEY);

Add some markers

Location on map can be in two ways. Latitude and longitude represented by Google_Maps_Coordinate object. Or pixel x and pixel y location represented by Google_Maps_Point object. You can use both when creating a marker.

$coord_1 = new Google_Maps_Coordinate('58.378700', '26.731110');
$coord_2 = new Google_Maps_Coordinate('58.368488', '26.768908');
$coord_3 = new Google_Maps_Coordinate('58.268488', '26.768908');

$marker_1 = new Google_Maps_Marker($coord_1);
$marker_2 = new Google_Maps_Marker($coord_2);
$marker_3 = new Google_Maps_Marker($coord_3);

$marker_1->setColor('green');
$marker_2->setColor('blue');
$marker_3->setColor('orange');

$map->setMarkers(array($marker_1, $marker_2, $marker_3));

Automatically Calculate Zoom and Center

Google Static Maps API can automatically calculate zoom and center for you. However there is no way to know what zoom level it chose. If you need to know automatically calculated zoom and center use $map->zoomToFit() method.

Here we also add new marker using pixel coordinates. Note that we also clear the center of the map we set in the beginning. This allows map to recenter the map according to markers on the map.

$point_1  = new Google_Maps_Point('308107197', '160958681');
$marker_4 = new Google_Maps_Marker($point_1);
$map->setCenter(false);
$map->addMarker($marker_4);
$map->zoomToFit();

Show Marker Bounds

Sometimes you need to be able to visually see bounding box where all the markers fit in.

$map->showMarkerBounds();

Show Map Bounds at Chosen Zoom Level

You can also calculate and show map bounds at any zoom level. Example below displays map bounds at zoom level 8. Map itself is at zoom level 7.

$map->setZoom(7);
$map_bounds = $map->getBounds(8);
$map->setPath($map_bounds->getPath());

Where’s the Source?

If you want to play around with code you can get from github. Patches, improvements and suggestion are welcome.

$ git clone git://github.com/tuupola/php_google_maps.git
$ wget http://github.com/tuupola/php_google_maps/zipball/master

Infowindows With Google Static Maps

Sat, 13 Sep 2008 00:00:00 +0000

Heads up! This article was written in 2008 and it exists mostly for historical purposes.

Previously I showed you how to make a Google Static Map with clickable markers. Several people emailed me to ask how to show infowindow (or infobubble) when marker is clicked. Technique I explain below still needs JavaScript. It is used to open the infowindow. I use jQuery library in the examples.

Image above is just a screenshot. There is a separate page for working demo. Full source code is also available.

Infowindow HTML

First thing we need is HTML code for the infowindow. I wanted it look exactly the same as in Google Maps. I opened a random map and copied the HTML using FireBug inspect console.

I removed all unneseccary code and moved CSS to separate file. Resulting HTML is quite simple. Now we have an empty infowindow ready for use.

Infowindow Content

In this example we have three green markers. Green markers should open infowindow when clicked. We could write full HTML code for three infowindows. In our case it is unneseccary. We will have separate content div but share rest of infowindow code between markers. This way there will be less HTML code on the page.

<div id="bubble">
  ...
  <div id="content_0" class="bubble content"></div>
  <div id="content_1" class="bubble content"></div>
  <div id="content_2" class="bubble content"></div>
</div>

Later when marker is clicked we should figure out which marker it is and choose one content div to display. Other content divs will be hidden.

Which Marker Was Clicked?

Each content div has unique id. We can inject same id to image map we generate. Lets put the id into name attribute of each link.

<map name="marker_map">
  <area shape="circle" coords="75,103,12" href="#" name="content_0">
  <area shape="circle" coords="122,105,12" href="#" name="content_1">
  <area shape="circle" coords="149,125,12" href="#" name="content_2">
</map>

For this we need to alter imagemap generating code. This code we made in previous part of this tutorial.

$counter = 0;
$imagemap = '<map name="marker_map">';
foreach ($marker_array as $marker) {
    ...
    $marker_y = $center_offset_y + $delta_y - 20;
    $imagemap .= sprintf('<area shape="circle" coords="%d,%d,12" href="#"
                          name="content_%d">',
                          $marker_x, $marker_y, $counter);
    $counter++;
}
$imagemap .= '</map>';

Now we have matching id and name between imagemap and content divs. Last thing to do is open the infowindow.

Opening the Infowindow

When page with static map loads infowindow is hidden by default. We will listen for click events in imagemap areas.

$(function() {
    $('map area').bind('click', function(event) {
        /* Here be the dragons. */
    });
});

When marker is clicked following things need to be done:

Previous infowindow (if any) should be hidden.
Content with same id as markers name should be shown.
Infowindow should be repositioned over clicked marker and then shown.

We take a small shortcut here. We do not calculate infowindow position using markers coordinates. Instead we use coordinates received from click event. This is not exactly the same as marker position but close enough. However you can see how infowindow appears in different places if you move your mouse a bit and click one marker several times.

$(function() {
    $('map area').bind('click', function(event) {

        /* Hide previous infowindow. */
        $('div.bubble.content').hide();

        /* Show content div with same id as markers name. */
        var id = '#' + $(this).attr('name');
        $(id).show();

        /* Calculate infowindow position and show it. */
        var bubble_left = event.pageX - 160;
        var bubble_top  = event.pageY - 200;
        $('#bubble').css({left: bubble_left, top: bubble_top}).show();

        return false;
    });

    $('#bubble img.close').bind('click', function(event) {
        $('#bubble').hide();
    });
});

Notice the last three lines? They close the infobubble when cross icon on top right corner is clicked.

What next?

If you have simple map combining Static Maps API an JavaScript infobubble is a blazing fast technique. What if JavaScript is not available at all? Don’t worry. That we will fix next time. In mean while let’s play around with the working demo.

Clickable Markers With Google Static Maps

Sun, 13 Jul 2008 00:00:00 +0000

Heads up! This article was written in 2008 and it exists mostly for historical purposes.

Static map is one big image. Markers are embedded inside the image. You can not use traditional <a href="#"> tags around separate markers. Binding onclick event to separate marker images wont work either. There are no separate markers. Just one large image.

With imagemaps you can specify arbitary areas inside an image which links to given url. Area can be circle, rectangle or polygon. Simple imagemap could look like following:

<map name="marker_map">
  <area shape="circle" coords="75,103,12" href="#">
  <area shape="circle" coords="122,105,12" href="#">
</map>

With imagemaps we can create clickable markers for Google Static Maps. We need to position an imagemap area over each marker. Problem is how to calculate x and y pixel coordinates for each marker.

For this tutorial lets start with with static map you see above. It is created with following PHP code.

require_once 'Net/URL.php';
require_once 'Google/Maps.php';

$map_width  = 512;
$map_height = 300;
$map_size   = $map_width . 'x' . $map_height;
$zoom       = 13;
$markers    = '58.378700,26.731110,green|58.368488,26.768908,green|
               58.379646,26.764090,green';

$api_key = trim(file_get_contents('api_key.txt'));

/* Build the URL's for Static Maps API. */
$url = new Net_URL('http://maps.google.com/staticmap');
$url->addQueryString('center',  $center);
$url->addQueryString('zoom',    $zoom);
$url->addQueryString('markers', $markers);
$url->addQueryString('size',    $map_size);
$url->addQueryString('key',     $api_key);
$demo_map = $url->getUrl();

Calculating Pixel Coordinates for Markers

For imagemap we need to know where markers are located in static map image. To calculate pixel location of marker we need to know the following things:

Latitude and longitude of the center of the map.
Current zoom level.
Size of the static map in pixels.

Static Maps API can automatically calculate needed zoom level and center position of the map. However there is no way of receiving this information back. Instead we have to calculate center latitude and longitude ourselves.

Calculating Map Center

There are several ways of calculating geographic center of two or more points on earth surface. First is to calculate geographic midpoint in cartesian coordinates. Second is to find center of distance. Center of distance is point which has smallest possible distance from all given points. Both these methods give accurate results but require pretty complex calculations.

Easiest way to find map center is to use average latitude and longitude of all given markers. Result is close enough approximation for our needs.

/* Calculate average lat and lon of markers. */
$marker_array = explode('|', $markers);
foreach ($marker_array as $marker) {
    list($lat, $lon, $col) = explode(',', $marker);
    $lat_sum += $lat;
    $lon_sum += $lon;
}
$lat_avg = $lat_sum / count($marker_array);
$lon_avg = $lon_sum / count($marker_array);

/* Set map to calculated center. */
$url->addQueryString('center',  $center);

We also have to convert center latitude and longitude to pixel coordinates in world map. For this we use previously created Google_Maps PHP class.

/* Calculate center as pixel coordinates in world map. */
$center_x = Google_Maps::LonToX($lon_avg);
$center_y = Google_Maps::LatToY($lat_avg);

While were at it lets also calculate center as pixel coordinates in map image. This is really easy. We only need to divide image width and height by two.

/* Calculate center as pixel coordinates in image. */
$center_offset_x = round(512 / 2);
$center_offset_y = round(300 / 2);

Now we know three things about demo map center. Latitude and longitude coordinates are 58.3756113333,26.7547026667. This equals to 308334961,160637460 in world map pixel coordinates. Which in turn equals 256,150 in image pixels coordinates.

To prove our point let’s add a blue marker in our calculated center of map.

$markers .= sprintf('|%s,%s,blue', $lat_avg, $lon_avg);
$url->addQueryString('markers', $markers);

$map_with_center = $url->getUrl();

We still need to make markers clickable…

Calculating Marker Pixel Positions

For each marker we know their latitude and longitude. To find their location on map image following calculations have to be done.

Convert latitude and longitude to pixel x and y coordinates.
Calculate difference between above and map center x and y coordinates.
Convert above difference to match current zoom level.
Add above difference to center pixel coordinates in image.

PHP code below does all above. Note how shift right operator >> is used to convert the difference between center and marker pixel coordinates for current zoom. Maximum zoom is 21. Variable $zoom is the current zoom level. For zoom level 13 we would be doing delta >> (21-13) which equals delta >> 8 which equals delta / 2^8 which in turn equals delta / 256.

foreach ($marker_array as $marker) {
   list($lat, $lon, $col) = explode(',', $marker);
   $target_y = Google_Maps::LatToY($lat);
   $target_x = Google_Maps::LonToX($lon);
   $delta_x  = ($target_x - $center_x) >> (21 - $zoom);
   $delta_y  = ($target_y - $center_y) >> (21 - $zoom);
   $marker_x = $center_offset_x + $delta_x;
   $marker_y = $center_offset_y + $delta_y;
}

Generate Imagemap for Markers

Now we know marker pixel locations on static map. This enables us to generate imagemap for them. We will create clickable circles with radius of 12 pixels. Lets modify code we just wrote. Note that calculated marker location points to markers foot. We want the round head of marker be clickable. That is done by adjusting y coordinate with -20 pixels.

$imagemap = '<map name="marker_map">';
foreach ($marker_array as $marker) {
  ...
  $marker_y = $center_offset_y + $delta_y - 20;
  $imagemap .= sprintf('<area shape="circle" coords="%d,%d,12" href="#">',
                        $marker_x, $marker_y);
}
$imagemap .= '</map>';

For demo’s sake lets also add some jQuery code to notify us when marker is clicked.

$(function() {
    $('map area').bind('click', function() {
        alert('You clicked on marker.');
        return false;
    });
});

Click on green markers.

Conclusion

It takes a bit work but you can have clickable markers with static map. Yes I used JavaScript to indicate when marker was clicked. But that was not the point. Static maps are usually faster to load than full Google Map JavaScript API. You can also create gracefully degrading Google Map for those users with JavaScript disabled. Ability to click marker also gives you ability to open infobubble without JavaScript. That is left for the next part on series of blog posts about Google Maps.

You can find source code to the working demo from svn.

Google Maps Without JavaScript Part 2

Wed, 04 Jun 2008 00:00:00 +0000

In previous part we made a Google Map with sidebar navigation which works even JavaScript turned off. Marker locations and sidebar were parsed from two KML files. Beginning Google Maps Applications is a great book to learn about KML and Google Maps in general.

In this second part of tutorial I show you how to add zoom and pan controls. Again, they work without JavaScript. Be sure to read tutorial part one first. Also check the live demo.

Before going forward I would like to answer a question which has been asked more than once:

Q: What is the point?
A: Two reasons. Websites should degrade gracefully. Page should still have understandable content even if JavaScript is turned off. Second reason is just because it is cool.

Add controls to static map

First we add arrows and plus and minus images on a separate layer. This layer is positioned over the static map. I use Google provided images. Mapki has list of all available images.

Note! In example code I use only filenames as source attribute. Full address would not fit to screen.

<div id="map" style="width:512px; height:300px">
  <img src="<?php print $current_map ?>" />
  <div id="controls">
    <a href=""><img src="north-mini.png" id="pan_up" /></a>
    <a href=""><img src="west-mini.png" id="pan_left" /></a>
    <a href=""><img src="east-mini.png" id="pan_right" /></a>
    <a href=""><img src="south-mini.png" id="pan_down" /></a>
    <a href=""><img src="zoom-plus-mini.png" id="zoom_in" /></a>
    <a href=""><img src="zoom-minus-mini.png" id="zoom_out" /></a>
  </div>
</div>

Did you notice the $current_map variable? It is Google Static Maps address constructed with PHP. I use Net_URL class to build the address. It makes altering the query string later much easier. Address for current static map is built with following code:

/* Build the URL's for Static Maps API. */
$url = new Net_URL('http://maps.google.com/staticmap');
$url->addQueryString('center',  $_GET['center']);
$url->addQueryString('zoom',    $_GET['zoom']);
$url->addQueryString('markers', $_GET['markers']);
$url->addQueryString('size',   '512x300');
$url->addQueryString('key',     $api_key);

$current_map = $url->getUrl();

Make zoom buttons work

To make zoom buttons work we need to create two URL addresses. First with zoom parameter one smaller than current. Second with zoom level one larger than current. Maximum zoom level is 17. Minimum zoom level is 1.

/* Create query strings for + and - buttons. */
$url->addQueryString('zoom', min(17, $_GET['zoom'] + 1));
$zoom_in = $url->getQueryString();

$url->addQueryString('zoom', max(1, $_GET['zoom'] - 1));
$zoom_out = $url->getQueryString();
</code>

Note that we store only query string to $zoom_in and $zoom_out parameter. Full address is not needed. These query strings are then used as links for zoom in and zoom out controls.

<a href="?<?php print $zoom_in ?>"><img src="zoom-plus-mini.png" id="zoom_in" /></a>
<a href="?<?php print $zoom_out ?>"><img src="zoom-minus-mini.png" id="zoom_out"

Make pan buttons work

Pan buttons are bit more trickier. Map is positioned using center parameter containing latitude and longitude. Lets assume we want to pan map 100 pixels right. For that we need to do following things.

Calculate current center longitude as pixels.
Add 100 pixels to it.
Calculate new pixel value as longitude.
Pass new longitude to Static Maps API in center parameter.

Latitude and longitude to pixels conversions are done using some Mercator projection magic. I do not claim I understand it. Quite frankly, I don’t. Thanks to Bratliff from Google Maps API mailinglist who pointed me to some JavaScript mercator code. I used this as a basis and ported the functions to PHP.

Using the freshly created Google Maps PHP class we can calculate new latitudes and longitudes for each panning direction. Note! In example we move map 60 pixels vertically and 100 pixels horizontally.

list($lat, $lon) = explode(',', $_GET['center']);

/* Calculate new latitudes and longtitudes for each arrow. */
$lat_up    = Google_Maps::adjustLatByPixels($lat, -60,  $_GET['zoom']);
$lat_down  = Google_Maps::adjustLatByPixels($lat,  60,  $_GET['zoom']);
$lon_left  = Google_Maps::adjustLonByPixels($lon, -100, $_GET['zoom']);
$lon_right = Google_Maps::adjustLonByPixels($lon,  100, $_GET['zoom']);

Next we put new center parameter into query string. Each direction is stored into separate parameter.

/* Make query strings out of them. */
$url->addQueryString('center', "$lat_up,$lon");
$pan_up    = $url->getQueryString();

$url->addQueryString('center', "$lat_down,$lon");
$pan_down  = $url->getQueryString();

$url->addQueryString('center', "$lat,$lon_left");
$pan_left  = $url->getQueryString();

$url->addQueryString('center', "$lat,$lon_right");
$pan_right = $url->getQueryString();

These query strings are later used as links for panning controls.

<a href="?<?php print $pan_up ?>"><img src="north-mini.png" id="pan_up" /></a>
<a href="?<?php print $pan_left ?>"><img src="west-mini.png" id="pan_left" /></a>
<a href="?<?php print $pan_right ?>"><img src="east-mini.png" id="pan_right" /></a>
<a href="?<?php print $pan_down ?>"><img src="south-mini.png" id="pan_down" /></a>

Now we have non JavaScript map with working sidebar, zoom and panning. Info windows (bubbles) are still missing. Lets leave that for part 3. You can find source code to the working demo from svn.

Google Maps Without JavaScript

Sat, 26 Apr 2008 00:00:00 +0000

We recently did a small Google Maps application for ERGO insurance. It consisted of submitting all their offices to Google Maps. KML export of office data was used to create map at ERGO autoabi campaign site. First version used all JavaScript approach to create the sidebar and map on the page. I was not happy with it. Map page was empty for browsers with JavaScript disabled. Page also took too long to render. Two problems I could not ignore.

Second version was mixture of PHP, JavaScript and new static maps API. Map now works without JavaScript. It renders much faster too. Check the working demo to see yourself.

Importing KML

Google offers GGeoXML library for KML parsing. That I ditched in the beginning. It was impossible to create sidebar navigation with it. First I ended up using EGeoXML. It got the job done but as I said earlier was too slow.

To speed things up I parsed KML files and outputted sidebar HTML with PHP. Simplified HTML and PHP below. Do not mind about # hrefs. They will be replaced with something meaningfull later.

<h3><a id="cityname" class="city" href="#">ERGO cityname</a></h3>
<ul>
    <li><a  class="office" href="#" id="marker-1">Office 1</a></li>
    <li><a  class="office" href="#" id="marker-2">Office 2</a></li>
    <li><a  class="office" href="#" id="marker-3">Office 3</a></li>
</ul>

$kml = array("tartu.kml", "parnu.kml");

/* Used in id's so we can later bind click to correct marker. */
$counter  = 0;
foreach($kml as $file) {
    $city = str_replace('.kml', '', $file);
    $xml  = $xml = simplexml_load_file($file, null, LIBXML_NOCDATA);

    /* Print cityname as headline. */
    printf('<h3><a id="%s" class="city" href="#">%s</a></h3>',
            $city, $xml->Document->name);
    foreach ($xml->Document->Placemark as $placemark) {
        $coordinates = $placemark->Point->coordinates;
        list($longtitude, $latitude, $discard) = explode(',', $coordinates, 3);

        /* Save parsed KML as simpler array. We output this as JSON later. */
        /* Save also id so we can match clicked link ad marker.            */
        $markers[] = array("latitude"    => $latitude,
                           "longtitude"  => $longtitude,
                           "name"        => (string)$placemark->name,
                           "description" => (string)$placemark->description,
                           "id"          => "marker-$counter");

        /* Print officename as link to single office. */
        printf('<li><a class="office" href="#" id="marker-%d">%s</a></li>',
                $latitude, $longtitude, $counter, $placemark->name);
        print "\n";
        $counter++;
    }
    print "</ul>\n";
}

Putting Markers on Map With JavaScript

I gave the PHP parsed KML array back to JavaScript using JSON. Array is then looped passing data to addMarker() method. This method creates new marker, puts it on map and binds event to open new infowindow when marker is clicked. Simplified code below:

$(function() {

    /* Output parsed KML files as JSON */
    var markers     = <?php print json_encode($markers) ?>;
    var marker_hash = {};

    if (GBrowserIsCompatible()) {
        /* Init and center at Tartu. */
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.setCenter(new GLatLng(58.38133351447725, 24.516592025756836), 12);

        for (var i=0; i<markers.length; i++) {
            var current = markers[i];
            var marker  = addMarker(current);
            marker_hash[current.id] = {marker : marker};
        }
    }

    function addMarker(current) {
      var marker  = new GMarker(new GLatLng(current.latitude,
                                            current.longtitude));
      map.addOverlay(marker);
      GEvent.addListener(marker, 'click', function() {
          var html = '<h3>' + current.name + '</h3><p>' +
                     current.description + '</p>';
          marker.openInfoWindowHtml(html);
      });
      return marker;
    }

});

Make It Work With JavaScript Challenged Browsers

Inside the map <div> there is an <img> tag which points to Google Static maps api. You can pass needed parameters in URL and Google generates map as static image. For example:

http://maps.google.com/staticmap?&zoom=12&size=688x300
&center=58.378700,26.731110&key=GOOGLE_API_KEY

Generates the following map:

What we do here is really simple. In sidebar links we pass needed parameters in querystring. PHP then writes these parameters into <img> tag pointing to static maps api. Instead of center we pass markers parameter. It contains coordinates to one or more markers. Map api then centers map automatically. This comes especially handy when there is multiple markers.

For example link:

<a href="?markers=58.384933,24.499811,red|58.384731,24.507816,red|">

becomes the following img tag:

<img src="http://maps.google.com/staticmap?size=688x300
&markers=58.384933,24.499811,red|58.384731,24.507816,red|
&key=GOOGLE_API_KEY" />

which looks like this:

What we need to do is to update the code which generates sidebar html. I cut out lots of code for sake of clarity here. Important line is one with printf().

foreach($kml as $file) {
    ...
    foreach ($xml->Document->Placemark as $placemark) {
        ...
        printf('<li><a  class="office" href="?zoom=14&markers=%s,%s,red"
        id="marker-%d">%s</a></li>', $latitude, $longtitude, $counter,
        $placemark->name);
        ...
    }
    ...
}

Each link now shows you map with single marker centered on map. Creating link for each city is requires one extra step. Each city contains multiple markers. Before creating the sidebar we loop through KML once to to build a querystring for marker parameter.

/* Prebuild querystring for all markers in a city. This is needed  */
/* to make a link which contains all markers in query string.      */
foreach($kml as $file) {
    $city = str_replace('.kml', '', $file);
    $temp = 'markers=';
    $xml = $xml = simplexml_load_file($file, null, LIBXML_NOCDATA);
    foreach ($xml->Document->Placemark as $placemark) {
        $coordinates = $placemark->Point->coordinates;
        list($longtitude, $latitude, $discard) = explode(',', $coordinates, 3);
        $temp .= sprintf('%s,%s,red|', $latitude, $longtitude);
    }
    $markers_string[$city] = $temp;
}

We also need to make small change code building the sidebar.

foreach($kml as $file) {
    ...
    /* Use prebuild querystring in city links. */
    printf('<h3><a id="%s" class="city" href="?%s">%s</a></h3>',
    $city, $markers_string[$city], $xml->Document->name);
    ...
}

Now we have working map with sidebar. Biggest difference is missing infowindows (bubbles). They would be perfectly doable but I left them out for a reason now.

You can find source code to the working demo from svn. There was couple of cosmetic things I did not describe here so check the source. ERGO Autoabi minisite still contains both original and improved versions of the map.

Static maps api is really great. I have only one complaint. Maximum size of 512x512 is a bit too limiting to my taste.

UPDATE: Google recently increased the maximum size of static map to 640x640. Thank you!