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

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

 

à  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.

 

à  JavaScript that lets you control the map on http://maps.google.com, 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 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

http://maps.google.com.

 

Google will cache your Mapplet source and serve it from its own servers at

http://gmodules.com.

 

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 http://maps.google.com

 

à  To reduce the load on your site from the potential high number of users you’ll

have

 

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

(http://maps.google.com/ig/directory?synd=mpl&pid=mpl&cat=devtools).

 

à  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

Pad.

 

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″?>

<Module>

<ModulePrefs title=”Hello World”

description=”My First Mapplet”

author=”Ashutosh Sharma”

author_email=”sharma.ashutosh84.googlepages.com”

height=”150″>

</ModulePrefs>

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

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

<h4>Java Tutorials : Visit

<a href>sharma.ashutosh84.googlepages.com

</a></h4>

]]></Content>

</Module>

 

 

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″?>

<Module>

<ModulePrefs title=”INDIA GATE, DELHI”

description=”Creating a Simple Map and Marker”

author=”Ashutosh Sharma”

author_email=”sharma.ashutosh84.googlepages.com”

height=”150″>

<Require feature=”sharedmap”/>

</ModulePrefs>

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

<h2>India Gate</h2>

<script>

// 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);

map.addOverlay(marker);

</script>

]]></Content>

</Module>

 

INDIA GATE, DELHI

 

Java Tutorials by Ashutosh Sharma :

visit  http://sharma.ashutosh84.googlepages.com