Google Maps Without JavaScript Part 2

Wed, Jun 4, 2008

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.

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:

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.

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.