Static & Flash Maps

What we'll talk about

• Brief intro to the JS Maps API
• Static Maps API
• Maps API for Flash
Google Maps: The Product
Released in February 2005.
One of the first AJAX apps and
"slippy maps" implementations.

Features:
• Searches:
o Addresses
o Local businesses
o User content
• Driving Directions (Transit too)
• Traffic Overlay
• Street View
• KML/GeoRSS Browsing
• My Maps
• Mapplets
Google Maps Javascript API
Released in June 2005.
A subset of the Javascript that powers Google Maps.

Features:
• Events
• Controls
• Overlays:
o Markers, Polys, InfoWindows, GroundOverlays,
ScreenOverlays, TileLayers
• Services:
o Geocoding, Driving Directions, Traffic, KML/GeoRSS,
Street View, Local Search
• Interfaces:
o Overlay, Control, TileLayer
Google Maps Javascript API
It can duplicate the functionality of Google Maps:
• RealBird Listings
• Trulia

It can modify the UI of Google Maps:

• Ace Hardware
• Apple Store Locator

It can replace the map types with its own aerial imagery:
• NOAA
• MapWoW

Or it can make something completely different:

• SPACE Magazine
• MapLib
• Google Sky
• Prague  360
Google Maps APIs: The New Generation
In 2008, we released two new ways for programmatically
creating Google Maps:
• Static Maps API (February)
• Maps API for Flash (May)

Why?
• New environments
• Performance enhancements
Static Maps API: What is it?
Just add in IMG tag pointing to a well-crafted URL, and presto,
map-o!

<img src="http://maps.google.com/
  staticmap?center=-23.536511,-46.62559&zoom=10&
  size=300x200&markers=-23.607614,-46.69727&key=ABCDEFG"
  />
Static Maps API: Features
• Specifying a zoom level/center
• 4 different map types 
• Various marker sizes, colors, letters
• Polylines up to 50 points
• Auto zooming to markers passed in
• Auto zooming to a provided span

Try these out in the Static Maps Wizard.

Static Maps API: Why?
Non-Javascript environments/browsers:

 The most common example of this is Mobile. Some users have

JS on their phone, but many don't. A non-JS alternative is your
best guarantee for reaching users.

Examples:
Orbitz Mobile

Mobile Lonely Planet

Non-JS Local Search

Static Maps API: Why?
Thumbnails

 When you just want to give the user a quick preview of a

location or map, use the static maps API at small sizes.

Examples:
 
Glotter  
 
360Cities
Static Maps API: Why?
Faster loading pages:

The JS Maps API can take time to load (multiple script + image
resources).

If the map isn't the main focus of a page and especially if the
user is on a dial-up connection, it doesn't make sense to make
the user wait for everything to load.
 
There are several ways to combine the Static Maps API with
the JS API for a better user experience.
>>
Static Maps API: Why?
Faster loading pages: 3 Techniques
• Start with static map. Seamlessly load in JS API when user tries to
interact with the map.
o Example: Yelp

• Start with static map. Include a UI element the user can click on to
load in the JS API.
o Example: http://www.nearby.org.uk/google/static3.php

• Start with static map. After the page loads + a small timeout, load in
the JS API. Don't give the user enough time to use it before that
happens. :)
o Example: http://www.nearby.org.uk/google/static4.php,
o Example: Google MapSearch Gadget
Maps API for Flash: What is it?
 Lets you write code in Actionscript3, compile it against our
interface library, and output a SWF.

 SWF can be embedded on your web page, Google Earth,

MySpace pages, etc.
Maps API for Flash: Features
• Events
• Controls
• Overlays:
o Markers, Polys, InfoWindows, GroundOverlays,
TileLayerOverlays
• Services:
o Geocoding, Directions
• Interfaces:
o Overlay, Control, TileLayer
• Styles !

Demo: 
PolygonOptionsPlayground

IMap
Maps API for Flash: Why?
Integration into Flash/Flex sites

Some sites are already built entirely in Flash/Flex, and

integrating a JS API can be painful.

Examples:

Prague 360 Panorama

• Uses Flash for fast and smooth viewing of panoramas.
• Easier to embed the Flash map than a JS map.

NavX
• Surrounding UI was already Flex.
• Converted JS to Flash in one week.
Maps API for Flash: Why?
Smoother Video/Animation

Flash was originally designed for artists creating animations, so

animation is native and smooth. Javascript can achieve
animation only through the unreliable setInterval/setTimeout.

Examples:
Google Maps Driving Simulator
• Converted from JS: Doubled frame-rate, halved CPU usage

AFC Video Sync

Maps API for Flash: Why?
Better/More Vector Graphics

Flash handles vector graphics natively. Javascript uses one of

several techniques (browser-dependent): SVG, VML, or
rendering to images. So performance varies and is generally
not good, especially with large amounts of points/polys.

Examples:
Thematic Mapping with the Flash API
Biodiversity Heat Maps

Netherlands
Maps API for Flash: Why?
Better Binary and Real-time Data Streaming

Flash can make raw socket connections so that a continuous

stream of data can be read in (without closing the connection).
In Javascript, the closest emulation is with the COMET
technique. Flash can also load in binary data from URLs.
Javascript has no concept of binary objects. (Gears is working
on improving this).

Examples:
Collaborative Chat Rooms with Flash Maps
SHP File Reader
Maps API for Flash: Why?
Map Rotation

Since any sprite can be rotated in Flash, and the Map is a

sprite, it can be rotated. This is next to impossible in JS, as it'd
require image manipulation.

Example:
Spinning Map
Maps API for Flash: Why?
More Embeddable

For various reasons (security, JS errors), there are places

where SWFs can be embedded and JS cannot.

Examples:

Google Earth
 
EyeWonder Ad
In Conclusion...

Think about your design considerations and choose

your API(s) carefully.

Have fun! :)
Learn more
http://code.google.com/intl/es/