- Featured Columnists
- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Designing with Code: Providing Feedback
- Designing With Code: Creating a Resizable Interface
- Designing With Code: CSS Tips and Tricks to Speed Your Workflow
- Designing with Code: Handling PNG Transparency on the Web
- Designing With Code: Collaboration
- Designing With Code: Improving CraigsList
- Designing With Code: How to Create a Tag Cloud
- Designing with Code: RSS
- Designing With Code: Tumblelogging
- Designing With Code: Create a DropIn JavaScript Component
- Designing with Code: Leveraging Your Existing Content
- Designing With Code: Leveraging RSS
- Designing With Code: Converting Forms to Ajax
- Designing with Code: Converting Forms to Ajax, Part 2
- Designing With Code: Monster Mash
- How to Create Dynamic Script Tags for Ajax Components
- Creating a Winning Proposal for Web Projects
- Creating a Web Design Questionnaire
- Using Stylesheets in Flash CS3
- Animating with XML in Flash CS3
- Creating a Full-Screen Web Site with Flash CS3
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
- Table of Contents
- Welcome
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Layouts
- Forms
- Meta Tags and Search
- Usability
- Accessibility
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Multimedia
- Content
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Tools
- Tutorials
- Intellectual Property for Web Designers
Designing With Code: Monster Mash
Last updated Sep 14, 2007.
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.
Digg
Del.icio.us
Save To Your Account
