Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing With Code: Monster Mash

Last updated Oct 17, 2003.

By Kris Hadlock

Mashups allow entirely new applications to be built by simply combining the APIs from third-party applications. Many large web companies, such as Google, Yahoo, and Amazon, have been providing access to their applications' code libraries for some time. These APIs offer endless mashup opportunities, enabling you to essentially pick and choose the functionality that you want to offer your users by simply integrating multiple applications. You can, for example, integrate Google Maps with Google Adsense to match advertisements with map results or integrate the public transit route and schedule with map directions. The best part? It's easy to do.

In this article, we'll create a sample mashup that I'm calling the Monster Mash. This sample takes haunted houses that I hand-picked from the state of Illinois, which happens to be my old stomping grounds, and matches them up with Google Maps and corresponding Adsense advertisements. The sample can be viewed here and the source code for the mashup can be downloaded here.

The first step in creating a mashup with any of the APIs mentioned is retrieving your own keys. The two keys needed for this sample to run are for Google Maps and Google Adsense. Once we have these keys we can start building some mashups.

A good place to start with Google Maps is in the documentation. There are all kinds of code samples to help get you started with various types of functionality. In the sample, we'll use map overlays, plus map movement and animation. We'll use the map overlays to add markers to the map at specific coordinates and the map movement and animation to move the map from one location to another through code.

We'll start by adding all of the markers for the haunted houses and providing details, such as the name, description, and web address. Once we have the markers in place, we'll add some navigation to the side of the map to move from one haunted house to another. In order to do this, we'll add a navigation div and push links to it for each of the haunted houses. The links will have the movement and animation code to pan the map to the location of the marker for each specific haunted house.

Once we have the map and navigation in place, we can display advertisements that correspond to haunted houses. Google provides you with the code for this by simply following a few steps under the Adsense Setup tab in your Adsense account. Once you follow the steps and choose the ad type that you want to display, all you need to do is copy the code and add it to your page. Google handles the types of advertisements that display in your page by matching them up with the content that you're presenting.

Listing 1 show the code to render the navigation, map, and advertisements. In order to get this code to work on your web site, you just simply add your map and Adsense keys in place of the "YOUR KEY HERE" placeholders.

Listing 1: Monster Mash code

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Google Maps: Monster Mash</title>
  <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR KEY HERE" type="text/javascript"></script> 
  <script type="text/javascript">

  //<![CDATA[
  function load() {
   if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(41.525, -88.081667), 10);
    map.addOverlay(createMarker(new GLatLng(41.525, -88.081667), ’http://www.abysshaunts.com’, ’Abyss Haunts’, ’Two Rialto Square Building<br/>116 N. Chicago Avenue<br/>Joliet, IL 60436’));
    map.addOverlay(createMarker(new GLatLng(41.896868, -87.811714), ’http://www.hauntedhousechicago.com’, ’Haunted House Chicago’, ’PO Box 5023<br/>River Forest, IL 60305’));
    map.addOverlay(createMarker(new GLatLng(41.550073, -88.087304), ’http://www.hauntedtrailsfun.com’, ’Haunted Trails Joliet’, ’1425 N Broadway St<br/>Joliet, IL 60435’));

    document.getElementById(’navigation’).innerHTML += ’<a href="#" onclick="map.panTo(new GLatLng(41.525, -88.081667))">Abyss Haunts</a>’;
    document.getElementById(’navigation’).innerHTML += ’<br/><a href="#" onclick="map.panTo(new GLatLng(41.896868, -87.811714))">Haunted House Chicago</a>’;
    document.getElementById(’navigation’).innerHTML += ’<br/><a href="#" onclick="map.panTo(new GLatLng(41.550073, -88.087304))">Haunted Trails Joliet</a>’;
   }
  }

  function createMarker(point, url, label, location)
  {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(’<a href="’+ url +’" target="_blank">’+ label +’</a><br/>’+ location);
    });
    return marker;
  }  

  //]]>

  </script>
 </head>

 <body onload="load()" onunload="GUnload()" style="min-width: 1100px;">

   <div id="navigation" style="float: left; width: 200px;"></div>
  <div id="map" style="float: left; width: 600px; height: 600px; border: 1px solid #333;"></div>
  <div id="navigation" style="float: left; width: 200px; text-align: center;">

    <script type="text/javascript"><!--
    google_ad_client = "YOUR KEY HERE";
    google_ad_width = 160;
    google_ad_height = 600;
    google_ad_format = "160x600_as";
    google_ad_type = "text";
    google_ad_channel = "";
    google_ui_features = "rc:6";
    //-->
    </script>

    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  </div>
 </body>
</html>

This sample is a simple example of how easy it is to create a mashup. It can be further improved by automating the list of haunted houses, providing users with the ability to add new ones, listing them by state, and so on.