Create Custom Google Maps

HACK
Create Custom Google Maps
#95
H A C K

Use the Google Maps API to embed dynamic maps into your application with custom markup, overlays, and interactivity.
Hack #95
#95
In what little spare time I have, I love to hike around my neighborhood in Fremont, California. Thankfully, some of the best hiking in the Bay Area is just a walk away. In particular, the hike up Mission Peak is tremendous, both for its scenic vista and for the great workout. To illustrate my hikes up Mission Peak, Ive always used a wiki page with a bunch of images. But I always wanted something more interactiveand with the advent of Google Maps and its extensible API, I was able to use a combination of PHP and JavaScript to detail my hike up the mountain, using satellite imagery and interactive markers (hows that for technology and nature converging!).
The Code
Start by saving the code in Example 10-1 as index.php.
Example 10-1. Setting up latitude and longitude for Google mapping tasks
<?php $images = array( array( 'lat' => -121.9033, 'lon' => 37.5029, 'img' => "mp0.jpg" ), array( 'lat' => -121.8949, 'lon' => 37.5050, 'img' => "mp1.jpg" ), array( 'lat' => -121.8889, 'lon' => 37.5060, 'img' => "mp2.jpg" ), array( 'lat' => -121.8855, 'lon' => 37.5076, 'img' => "mp3.jpg" ), array( 'lat' => -121.8835, 'lon' => 37.5115, 'img' => "mp4.jpg" ), array( 'lat' => -121.8805, 'lon' => 37.5120, 'img' => "mp5.jpg" ) ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Google Maps Page</title> <script src="http://maps.google.com/maps?file=api&v=1&key=<mapskey>" type="text/ javascript"></script> </head> <body> <table> <tr> <td valign="top"> <div id="map" style="width: 300px; height: 300px"></div> </td> <td valign="top"> <img src="mp0.jpg" id="mpimg"> </td>
Chapter 10, Fun Stuff |
407
HACK
#95
Create Custom Google Maps Example 10-1. Setting up latitude and longitude for Google mapping tasks (continued)
</tr> </table> <script type="text/javascript"> var mp_images = [ <?php $first = true; foreach( $images as $img ) { ?> <?php if ( $first == false ) { echo( ',' ); } ?> { lat: <?php echo( $img['lat'] ) ?>, lon: <?php echo( $img['lon'] ) ?>, img: "<?php echo( $img['img'] ) ?>" }, <?php $first = false; } ?> ]; var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl( )); map.centerAndZoom(new GPoint(-121.8858, 37.5088), 4); map.setMapType( G_SATELLITE_TYPE ); var icon = new GIcon( ); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.iconSize = new GSize(20, 34); icon.shadowSize = new GSize(37, 34); icon.iconAnchor = new GPoint(9, 34); icon.infoWindowAnchor = new GPoint(9, 2); icon.infoShadowAnchor = new GPoint(18, 25); icon.image = "http://www.google.com/mapfiles/marker.png"; var markers = {}; for( i in mp_images ) { markers[i] = new GMarker( new GPoint( mp_images[i].lat, mp_images[i].lon ), icon ); GEvent.addListener(markers[i], "click", function( ) { for( m in markers ) { if ( markers[m] == this ) { document.getElementById( "mpimg" ).src = mp_images[m].img; } } } ); map.addOverlay(markers[i]); } </script> </body> </html>
Running the Hack

Before you run this hack, you need to get yourself a Google Maps API key. Simply visit the Google Maps site at http://google.com/apis/maps. You should see something like Figure 10-1.
408
Chapter 10, Fun Stuff
HACK
#95
Figure 10-1. The Google Maps API home page
From this site, click on the Sign up for a Google Maps API key link. That link takes you to the licensing page, where you can confirm that youve read Googles license agreement. You also need to specify your sites URL, which is of course where youll display maps. This page is shown in Figure 10-2. Youll have to be directory-specific as well. If the URL of the maps page will be http://www.mysite.com/maps/mymap.php, you should enter http://www. mysite.com/maps/. When you click Generate API Key, you might be asked for a login. If you dont already have a Google login, you will need to create one. Once you have created an account, you will be taken to the page where you can find your maps key. This page is shown in Figure 10-3. Ive blurred out the key here (hey, get your own!). The top box is the API key that you will need to place in the hack code where the <mapskey> placeholder is shown in Example 10-1 (its highlighted in the code).
409
HACK
#95
Figure 10-2. Specifying the URL of the page that will host the map Google also provides some sample code on the bottom of the API key page to help get you started. Isnt Google nice?
Once you have modified the hack code to add your Google key, upload the code and images to the server. Then surf to your PHP page in your web browser (mine is shown in Figure 10-4). The page shows the map on the lefthand side, and the image from the base of the mountain. When you click on one of the markers on the left, the image on the right changes to the image associated with the selected marker. In Figure 10-5, Ive clicked on a marker about halfway up the mountain. This example shows just how easy it is to create a highly interactive map in your PHP application and to add custom interactivity to that map. Ive seen dating-site maps based on this technology, and even a site that graphically overlays the bomb blast radius of various sizes of nuclear devices on any map location! Google, maps [Hack #86], and PHP are everywhere!
410
HACK
#95
Figure 10-3. The API key and the code fragment for the specified URL
Figure 10-4. The home page of the Mission Peak map
411
HACK
#95
Figure 10-5. After clicking on one of the markers
See Also
Create Custom Maps with MapServer [Hack #86] Find Out Where Your Guests Are Coming From [Hack #63]
412

Create Custom Google Maps

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create Custom Google Maps

Uploaded by

Copyright:

Available Formats

HACK