Hack95.Create Custom Google Maps


Hack 95. Create Custom Google Maps

Use the Google Maps API to embed dynamic maps into your application with custom markup, overlays, and interactivity.

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, I've 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 (how's that for technology and nature converging!).

10.2.1. 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="/books/1/201/1/html/2/http://maps.google.com/maps?file=api&v=1&key=<mapskey>" type="text/ javascript"></script> </head> <body> <table> <tr> <td valign="top"> <div  style="width: 300px; height: 300px"></div> </td> <td valign="top"> <img src="/books/1/201/1/html/2/mp0.jpg" > </td> </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> 

10.2.2. 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.

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 you've read Google's license agreement. You also need to specify your site's URL, which is of course where you'll display maps. This page is shown in Figure 10-2.

Figure 10-2. Specifying the URL of the page that will host the map


You'll 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 don't 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.

I've 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 (it's highlighted in the code).

Figure 10-3. The API key and the code fragment for the specified URL


Google also provides some sample code on the bottom of the API key page to help get you started. Isn't 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, I've 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. I've 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!

Figure 10-4. The home page of the Mission Peak map


Figure 10-5. After clicking on one of the markers


10.2.3. See Also

  • "Create Custom Maps with MapServer" [Hack #86]

  • "Find Out Where Your Guests Are Coming From" [Hack #63]



PHP Hacks
PHP Hacks: Tips & Tools For Creating Dynamic Websites
ISBN: 0596101392
EAN: 2147483647
Year: 2006
Pages: 163

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net