O'Reilly logo

PHP Hacks by Jack D. Herrington

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 interactive—and 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!).

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required