Google
Developer
Day2007

Maps API — Old Tricks and New Dogs

Steffen Meschkat

Why Maps

The other failsafe way of organizing information:
0 — Search.
1 — Order chronologically.
2 — Draw a map.
Putting it on a map is a great way to organize information.

The Google Maps API

— A library of "HTML elements" for places.
— An "HTML element" with augmented behavior.
— A page format for your content.
— A mashup application component.

The API at a Glance

Core
- GMap2.
User Interface
- Controls: GLargeMapControl, GZoomControl, GMapTypeControl, GScaleControl, GOverviewMapControl.
Content
- Map Type: Satellite, Street Map, Hybrid
- Simple Overlays: GMarker, GPolyline, GPolygon, GGroundOverlay, GScreenOverlay, GInfoWindow.
- Complex Overlays: GTrafficOverlaynew!, GGeoXml.
Services
- Geocoding: GClientGeocoder.
- Driving directions: GDirectionsnew!.
- AdSense for Maps: GAdsManagernew!.

The API at a Glance

Extension Interfaces
- GControl, GOverlay, GTileLayer
Components
- GKeyboard
- GMarkerManager
Utilities
- GEvent
- GXmlHttp, GXml, GXslt
- Data: GLatLng, GPoint, ...

Code

<html>
  <head>
    <script src="http://maps.google.com/?file=api"></script>
  </head>
  <body onload="hello()" onunload="GUnload()">
    <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>

Marker Geometry FAQ

Q How can I assure that the most important markers appear on top?
A You don't.
Q Why not?
A Because they stick out of the map:
- Markers point very precisely to a [sic] point.
- Target point is minimally occluded.
- 3D model amplifies this.
Btw., during interactive positioning, occlusion is even more reduced.

Asynchronous Continuation

Flow of control continues at a later time.

Continuation is passed as argument of type function:

map.getZoomAsync(function (zoom) {
  alert("Zoom level is " + zoom);
});

Occurs frequently:
- Event handling.
- Using services such as geocoding.
- Invoking dynamically loaded code.
- Invoking methods in other frames from other domains.
Leverages Closures.

How Services communicate to the maps Server

The HTML page invokes a service function.
The maps API library encodes the arguments into a URL.
API library creates a script element with that URL.
Server responds to the request with script that contains response data wrapped into a callback invocation.
Maps API library receives the data, removes the script element, and invokes the application callback.

Closures and Memory Leaks

Reference loops though a DOM node cause memory leaks.
Closures may create such loops, specifically when used as DOM event handlers:
```
node.onclick = function(event) {
  alert("click!");
}
```

Avoid reference loops: Use factory functions for closures.

function makeOnClick() {
  return function() {
    alert("click!");
  };
}
node.onclick = makeOnClick();

Break reference loops: Use GEvent.addDomListener() to register event listeners, and GUnload().

Performance

Browser UI and all javascript runs in a single thread.
Slow synchronous operations freeze the whole browser.
Specifically, DOM operations are slow.
Therefore:
- Postpone DOM operations, e.g. using GMarkerManager.
- Embrace asynchronous completion.
- Break up slow operations into asynchronously invoked portions.

Extension Interfaces

Some interfaces in the API are not for you to use, but for you to implement.
These are: Overlay, Control, TileLayer.
You implememt them using delegation, prototypes, and constructors.

The Google Maps API

— A library of "HTML elements" for places.
— An "HTML element" with augmented behavior.
— A page format for your content.
— A mashup application component.
— A platform to create mashup application components.

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?

Therefore: Mapplets!

— Bring your mashups to Google Maps users!
— Developer preview version of Mapplets:

Mapplets are created from a mashup of APIs

Google Gadgets API
- Iframe that can contain any HTML and Javascript.
- Accesses remote data.
- Stores user preferences.
Google Maps API
- Adds overlays to the map.
- Listens to events such as user clicks on the map.
A Mapplet is a Google Maps API application turned into a plugin for Google Maps: "Reverse Maps API."
Mapplets turn Google Maps into a "Mashup of Mashups."

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

All function calls are serialized and packetized.
The mapplet creates an iframe in the maps.google.com domain that includes the packet in the hash fragment of its URL.
When this iframe loads, it extracts the packet from the hash fragment and forwards it to the map.
All communication takes place in the browser. No server round trips!

Maps vs. Mapplets API: Asynchronous Calls

In the Mapplets API, calls that obtain a return value from the map are asynchronous.

Maps API:

var zoom = map.getZoom();
alert("Zoom level is " + zoom);

Mapplets API:

map.getZoomAsync(function (zoom) {
  alert("Zoom level is " + zoom);
});

We have appended Async onto the names of all affected methods.

Separation of Code and Data

Store your data in KML or GeoRSS:
— KML is a rich format for describing geographic data that can be read by Google Maps and Google Earth.
— GeoRSS is an extension to embed geographic coordinates in RSS feeds.
Google now indexes all the KML files on the web and returns them as search results.

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>

Conclusion

Write Mapplets.
Separate code and data.
Defer costly operations.
Embrace asynchronous completion.
Don't ask how to move markers to the top.