Create Custom Google Maps

8/3/2019 Create Custom Google Maps

1/7


2/7

Create Custom Google Maps #95

Chapter 10, Fun Stuff | 407

HACK

H A C K

#95Create Custom Google Maps Hack #95Use 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 inFremont, 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 abunch of images. But I always wanted something more interactiveandwith the advent of Google Maps and its extensible API, I was able to use acombination of PHP and JavaScript to detail my hike up the mountain,

using satellite imagery and interactive markers (hows that for technologyand 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

Simple Google Maps Page


3/7

408 | Chapter 10, Fun Stuff

#95 Create Custom Google Maps

HACK

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 shouldsee something like Figure 10-1.

var mp_images = [{ lat: ,lon: ,img: "" },

];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]);

}

Example 10-1. Setting up latitude and longitude for Google mapping tasks (continued)


4/7



HACK

From this site, click on the Sign up for a Google Maps API key link. Thatlink takes you to the licensing page, where you can confirm that youve readGoogles license agreement. You also need to specify your sites URL, whichis 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 youdont already have a Google login, you will need to create one. Once youhave created an account, you will be taken to the page where you can findyour 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 APIkey that you will need to place in the hack code where the place-

holder is shown in Example 10-1 (its highlighted in the code).

Figure 10-1. The Google Maps API home page


5/7



HACK

Google also provides some sample code on the bottom of theAPI 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 webbrowser (mine is shown in Figure 10-4).

The page shows the map on the lefthand side, and the image from the baseof the mountain. When you click on one of the markers on the left, theimage 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 inyour PHP application and to add custom interactivity to that map. Ive seendating-site maps based on this technology, and even a site that graphicallyoverlays the bomb blast radius of various sizes of nuclear devices on anymap location! Google, maps [Hack #86], and PHP are everywhere!

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


6/7



HACK

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


7/7



HACK

See Also

Create Custom Maps with MapServer [Hack #86]

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

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

Documents

Create Custom Google Maps