With the release of Google Mapplets, developers can nowcreate map-based applications (or port their current Google Maps applications)and expose them to every user of Google Maps at http://maps.google.com.
Google handles the hosting and bandwidth of your application and provides a
directory of Mapplets so that users can find your application.
What’s a Mapplet?
Mapplets are small web applications that run within Google Maps. They are a
type of Google Gadget—the framework that allows developers to create small
web applications that can run within iGoogle, Google Maps, Orkut, or any web
page outside Google.Mapplets use the basic concepts and APIs of Google
Gadgets, though they are specifically used within the Google Maps realm.
In its basic form, a Mapplet is an XML file that contains the HTML and
à A web application that is displayed on the Google Maps site at
http://maps.google.com. This application is typically displayed in the lowerleft
corner of the page on http://maps.google.com.
external data, or even store and retrieve user preferences.
After you create your Mapplet, it’s up to you to host the Mapplet XML file
Google will grab the Mapplet XML file from your server and display it within an
<iframe> element on http://maps.google.com. (An <iframe> is an HTML element
that is used to embed HTML from another web site in a web page.) In this case,
Google uses an <iframe> element to embed your Mapplet in
Google will cache your Mapplet source and serve it from its own servers at
This is done for a few reasons:
accessing a user’s cookies on http://maps.google.com
à To reduce the load on your site from the potential high number of users you’ll
Let’s take a look at a live Mapplet
Open your browser to
http://maps.google.com/. Click the My Maps tab, and you will see a list of
Featured Content along with any maps you have created. Select the one about gasprices,
and you’ll see a Mapplet in action.
Getting Started with Mapplets
Installing the Developer Tools
Using either Firefox, Safari, or Internet Explorer (version 6 or newer), go to
http://maps.google.com/maps/mm, and sign in using your Google account. First
install the three developer modules that Google has created for Mapplet
development: the Mapplet Scratch Pad, the Developer Mapplet, and the API
Reference Mapplet. You can find these Mapplets in the Developer Tools section
of the Google Maps Directory
à The Mapplet Scratch Pad lets you develop Mapplets right in
http://maps.google.com. You’ll be able to cut and paste the following
code sample in the scratch pad and immediately see the application.
à The Developer Mapplet places a Reload link at the top of each Mapplet that
you have installed. The Reload link automatically reloads the source code for
the Mapplet you are viewing (or developing). Since Google caches Mapplet
source code, you’ll need this for developing and testing Mapplets. Trust me
on this one!
à The API Reference Mapplet is a simple application that displays all the
possible Mapplets API calls.
Once you have all three developer Mapplets installed, select the Mapplet Scratch
Your maps.google.com page should now look like
Creating Your First Mapplet
For your first Mapplet, you’re not even going to “touch” a map.
Let’s start by creating a simple “shell” Mapplet without any map API calls.
à Make sure you are at http://maps.google.com/maps/mm and that you’ve selected
the Mapplet Scratch Pad. You should see the Mapplet Scratch Pad in the
lower-left corner of the page.
à Cut the XML from below, and paste it into the Mapplet Scratch Pad.
à Click the Preview button in the Mapplet Scratch Pad. Figure shows the
“Hello World” Mapplet that you should see.
“Hello World” Mapplet
<?xml version=”1.0″ encoding=”UTF-8″?>
<ModulePrefs title=”Hello World”
description=”My First Mapplet”
<h2>Hello From Ashutosh Sharma!!</h2>
<h4>Java Tutorials : Visit
Adding a Map
So, the previous example showed the shell of a Google Mapplet/Gadget. Now
let’s do some mapping. In this example, you’ll create a map and add a marker
indicating the location of the Empire State Building. You’ll also center the map
on this point.
1. In the Mapplet Scratch Pad, click the “Go back to editor” button to display
the scratch pad editor.
2. Cut the XML from below, and paste it into the Mapplet Scratch Pad.
3. Click the Preview button in the Mapplet Scratch Pad.
Create a Map and Add a Marker to the Map
<?xml version=”1.0″ encoding=”UTF-8″?>
<ModulePrefs title=”INDIA GATE, DELHI”
description=”Creating a Simple Map and Marker”
// Create a map and center it over the INDIA GATE
var map = new GMap2();
var point = new GLatLng(28.61262650293896, 77.23015954511007);
// Add a marker right on the INDIA GATE
var marker = new GMarker(point);
INDIA GATE, DELHI
Java Tutorials by Ashutosh Sharma :