Google MAPS and Google Mapplets

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

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

JavaScript that make up your application. Mapplets have two components:


à  A web application that is displayed on the Google Maps site at This application is typically displayed in the lowerleft

corner of the page on


à  JavaScript that lets you control the map on, retrieve

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

containing your HTML and JavaScript. When a user installs your Mapplet,

Google will grab the Mapplet XML file from your server and display it within an

<iframe> element on (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:


à  To restrict your Mapplet’s JavaScript from doing anything harmful such as

accessing a user’s cookies on


à  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

Google Map Screen


Open your browser to 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, 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 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 page should now look like

 Map Scratch Pad


 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 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”

author=”Ashutosh Sharma”




<Content type=”html”><![CDATA[

<h2>Hello From Ashutosh Sharma!!</h2>

<h4>Java Tutorials : Visit

<a href>






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”

author=”Ashutosh Sharma”



<Require feature=”sharedmap”/>


<Content type=”html”><![CDATA[

<h2>India Gate</h2>


// Create a map and center it over the INDIA GATE

var map = new GMap2();

var point = new GLatLng(28.61262650293896, 77.23015954511007);


map.setCenter(point, 17);

// Add a marker right on the INDIA GATE

var marker = new GMarker(point);







 India Gate New Delhi

Java Tutorials by Ashutosh Sharma :



One Response to “Google MAPS and Google Mapplets”

  1. After reading this article, I just feel that I really need more information on the topic. Could you suggest some resources please?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: