Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

Select a language:

  • Close [x]
  • Close [x]

Customize a Google Maps result page with Google Mapplets

Create a client and server-side solution using RSS, XSLT, PHP, KML, and JavaScript

Jake Miles (jacob.miles@gmail.com), Senior Technical Liason, Twistage Inc.
Photo of Jacob Miles
Jake Miles is a Senior Technical Liason at Twistage, Inc, currently working with Facebook, Myspace and OpenSocial applications, using Java, PHP, Adobe Flex and JavaScript. He has been working as a professional developer for 10 years and has been an avid student and tinkerer since he was 10. He also teaches on a volunteer basis.
Dave Wegman (dwegman@twistage.com), CTO, Twistage
David Wegman is the CTO at Twistage, an online video provider. In addition to coding and technical writing, he enjoys the study of software systems usability and code refactoring. He lives and works in San Francisco.

Summary:  A Google Mapplet is an application that runs inside a Google Maps results page and lets you add your own custom information and behavior to the page and the map. In this tutorial, you will write a Google Mapplet that uses the Yahoo Weather RSS feed to display the local weather in Google Maps. To demonstrate different techniques while using the Google Mapplets API, you'll implement two solutions. The first is on the client side and uses RSS and JavaScript. The second is on the server side and uses XSLT, PHP, KML, and JavaScript.

Date:  21 Oct 2008
Level:  Intermediate
PDF:  A4 and Letter (651 KB | 34 pages)Get Adobe® Reader®

Activity:  11436 views
Comments:  

Before you start

This tutorial is for Web application developers interested in adding custom information and behavior to a Google Maps result page. Familiarity with PHP, JavaScript, and XSLT is recommended.

About this tutorial

Frequently used acronyms

  • Ajax: Asynchronous JavaScript + XML
  • API: application programming interface
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • HTTP: Hyper Text Transfer Protocol
  • KML: Keyhole Markup Language
  • PHP: PHP Hypertext Preprocessor
  • RSS: Really Simple Syndication
  • URL: Uniform Resource Locator
  • W3C: World Wide Web Consortium
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language
  • XSL: Extensible Stylesheet Language
  • XSLT: XSL Transformations

In this tutorial, you will build a Google Mapplet that displays the local weather using the Yahoo Weather RSS feed. You will call a reverse geocoder service (see Prerequisites for a link) using an Ajax request within the Google Mapplets API, which translates the current coordinates of the Google Map into a zip code.

You will implement two solutions: One that calls the Yahoo weather service from JavaScript and displays the weather in the sidebar, and another that calls your own remote Web server for a KML overlay to place on the map. Your remote Web server, running PHP 5.2, will use the XSL module to apply XSLT stylesheets to the RSS XML returned from Yahoo. You will implement two stylesheets: one that translates the Yahoo RSS data into a simpler data structure, to demonstrate insulating your presentation layer (the KML) from the outside data structure, and the other to translate the simpler local data structure into a KML overlay. Finally, you'll apply the overlay to the Google Map.

Back to top

Prerequisites

You'll need the following tools to follow along with this tutorial:

  • Development of a Google Mapplet requires that you keep it on a public Web server so Google can read the Mapplet into its cache to render Google Maps results pages. Thus, you need access to a public Web server for this tutorial. Apache Web server version 2.2 is one Web server that will work. See Resources for information on set up and configuration.
  • PHP version 5.2.6.
  • The reverse geocoder service from geonames.org.
  • A Web browser with JavaScript enabled.
  • Your favorite programming language editor.

1 of 11 | Next

Comments

Back to top

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML, Open source
ArticleID=346146
TutorialTitle=Customize a Google Maps result page with Google Mapplets
publish-date=10212008
author1-email=jacob.miles@gmail.com
author1-email-cc=dwxed@us.ibm.com
author2-email=dwegman@twistage.com
author2-email-cc=dwxed@us.ibm.com

Table of contents

1 of 11 | Next

Next steps from IBM

With the no-charge DB2 Express-C, Zend Core PHP, and Java you can develop advanced Web 2.0 applications quickly that matter.

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

 

Dig deeper into XML on developerWorks

Try IBM PureSystems. No charge.

IBM PureSystems on a kaleideoscope background

Experience today!

Get started with the cloud-based trial and pattern development kit.

Share this page:

  • Close [x]

Follow developerWorks:

  • Close [x]