' . "\n"; foreach ($markers 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 - $_GET['zoom']); $delta_y = ($target_y - $center_y) >> (21 - $_GET['zoom']); $marker_x = $center_offset_x + $delta_x; $marker_y = $center_offset_y + $delta_y - 20; // -20 is to point to center of bubble print "Delta: $delta_x,$delta_y "; print "Marker: $marker_x,$marker_y
"; $imagemap .= sprintf('', $marker_x, $marker_y); $imagemap .= "\n"; } $imagemap .= ''; $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', $_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(); /* Create query stings 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(); /* Reset zoom back to original. */ $url->addQueryString('zoom', $_GET['zoom']); 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']); /* 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(); ?> Google Maps With JavaScript Disabled
Pan up Pan left Pan right Pan down Zoom In Zoom Out

Map Which Degrades Gracefully

Map and sidebar above are generated from two KML files. This page has all Google Maps and jQuery JavaScript code removed. Click around on sidebar to see how it works. Then go back to page where all JavaScript is enabled and compare.

See how it was done by reading tutorials part 1 and part 2.