Google
Developer
Day2007
Maps Mashups and Mapplets
Steffen Meschkat
Copyright 2007 Google, Inc.

Why Maps

Why Maps API

The API at a Glance

The API at a Glance

Code

<html>
  <head>
    <script src="http://maps.google.com/?file=api"></script>
  </head>
  <body onload="hello()">
    <div id="map" style="width:400px;height:300px"></div>
    <script>
      function hello() {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng(37.71859, 6.679688);
        map.setCenter(point, 2); 

        var marker = new GMarker(point);
        map.addOverlay(marker); 
        marker.openInfoWindowHtml("Hello World!"); 
      }
    </script>
  </body>
</html>

Today: Finding an Apartment

Go to a real estate web site:
www.housingmaps.com
How safe is the area?
www.chicagocrime.org
www.greatschools.net
Where are good schools?

The gap between users and content

Some of the top sites that use the Google Maps API
Source: Nielsen//NetRatings US audience (April 2007)

Therefore: Mapplets!

Mapplets are created from a mashup of APIs

Code

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs>
  <Require feature="sharedmap"/>
</ModulePrefs>
<Content type="html"><![CDATA[

<h2>Hello World!</h2>

<script> 
  var map = new GMap2();
  var point = new GLatLng(37.71859, 6.679688);
  map.setCenter(point, 2); 

  var marker = new GMarker(point);
  map.addOverlay(marker); 
  marker.openInfoWindowHtml("Hello World!"); 
</script>

]]></Content>
</Module>

High Level Architecture

How a Mapplet Communicates With Google Maps

Maps vs. Mapplets API: Asynchronous Calls

Maps vs. Mapplets API: Security Restrictions

Don't Do This!

A lot of Google Maps mashups add markers to the map using Javascript.

var points = [ 
  [ 32.638688,  -97.366505, "Fort Worth" ],
  [ 37.425022, -122.161851, "Stanford University" ],
  [ 37.421901, -122.084681, "Googleplex" ] 
];

for (var i = 0; i < points.length; i++) {
  var lat   = points[i][0];
  var lng   = points[i][1];
  var name  = points[i][2];
  var marker = new GMarker(new GLatLng(lat, lng));
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(name);
  }
}

Instead, store your data in KML or GeoRSS

KML Example

<?xml version="1.0" ?>
<kml xmlns="http://earth.google.com/kml/2.1">
  <Document>

    <Placemark>
      <name> Stanford University </name>
      <Point>
        <coordinates> -122.161851,37.425022,0 </coordinates>
      </Point>
    </Placemark>

    <Placemark>
      <name> Googleplex </name>
      <Point>
        <coordinates> -122.084681,37.421901,0 </coordinates>
      </Point>
    </Placemark>

  </Document>
</kml>

Displaying KML/GeoRSS from a Mapplet

Display a whole layer with just 2 lines of code!

var kml = new GGeoXml("http://www.foo.com/places.kml");
map.addOverlay(kml);
The rest of the slide intentionally left blank.

How Mapplets fit into the Big Picture

Coverage: USA, Canada, UK, Japan, France, Italy, Germany, Spain, Australia, New Zealand, Everywhere.
The Map Widget: Drag, Continuous Zoom, Double Click to Zoom, Scrollwheel Zoom.
Controls: Pan & zoom, Zoom, Map type, Scale, Overview, Custom.
Content: Marker, Infowindows, Polylines. (Clear.)
Content: TileLayerOverlay, GroundOverlay, Feeds, Traffic. (Clear.)
Custom: Map type, Overlays.
Events, Behavior, and Animation:
Rollover, Set, Move, Drag. (Clear.)
Geocoding: 
Directions: 
Hello World. (Clear.)