What's New
in Google Geo APIs

Mano Marks, Senior Developer Advocate, Google
Google DevFest, Saint Petersburg May 25, 2011

@ManoMarks

User-facing APIs

Maps API v3

Earth API

Maps API for Flash

Static Maps API

Native SDKs for Android and iOS

Supporting APIs & developer tools

Maps API Web Services (Places, Directions, Geocoding, Elevation)
Fusion Tables
KML
SketchUp
Earth & Earth Pro

Location, location, location

Latitude API
Panoramio API
Picasa API
YouTube API
Buzz API
News Search API
Calendar API
Transit Feed Specification
Earth Builder
Earth Enterprise
Earth Engine
Refine
BigQuery
.....

Maps API v3

JavaScript Google Maps API
Optimized for both desktop and mobile browsers
Loads of features!

Browser Support
Desktop	Mobile
Internet Explorer 7+	Android
Firefox 3+	Safari (iOS)
Safari 4+	Blackberry 6
Chrome	Dolfin 2+

Maps API v3: Features

Map
SSL Support
Road, Terrain, Satellite and Hybrid maps
Satellite and 45° Imagery
Styled Maps
Custom Tile Support
Markers
Info Windows
Polylines + Polygons
Ground overlays
Custom overlays
Layers
Draggable Directions
Street View
Directions service
Geocoding service
Elevation service
Libraries

45° imagery

map.setTilt(45);  //map.setTilt(0)
map.setHeading(90); //0, 90, 180, 270

OverviewMapControl

var mapOptions = {
  //center: ...
  //zoom: ...
  overviewMapControl: true,
  overviewMapControlOptions: {
    opened: true
  }
};

Markers: Marker animations

marker = new google.maps.Marker({
  map: map,
  draggable: true,
  animation: google.maps.Animation.DROP, //DROP animation
  position: new google.maps.LatLng(...)
});

marker.setAnimation(google.maps.Animation.BOUNCE); //BOUNCE animation

marker.setAnimation(null) // clear animation

Layers

kmlLayer = new google.maps.KmlLayer('path_to_kml');
geoRssLayer = new google.maps.KmlLayer('path_to_georss');
trafficLayer = new google.maps.TrafficLayer();
bikeLayer = new google.maps.BicyclingLayer();

panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setTag('tag_to_filter_by');
panoramioLayer.setUserId('user_id_to_filter_by');

layer.setMap(map); //Add layer to the map
layer.setMap(null); //Remove layer from the map

Draggable directions

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var location = new google.maps.LatLng(-25.274398, 133.775136);

function initialize() {
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: location
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    doSomething(directionsDisplay.directions);
  });
}

Street View

HTML/JavaScript implementation
Supports Overlays
Supports Custom Imagery
Street View Data Service

Libraries

New in V3
Load only the features you need
Keeps load time down
More libraries coming soon

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js
  ?v=3&sensor=false
  &libraries=panoramio,geometry,adsense,places"></script>

Libraries: Geometry

google.maps.geometry.spherical

Spherical utilities allow you to compute angles, distances and areas from Lat/Lngs

computeArea
computeDistanceBetween
computeHeading
computeLength
computeOffset
interpolate

Libraries: Geometry

google.maps.geometry.encoding

Encoding utilities allows you to encode and decode polylines

encodePath
decodePath

Libraries: AdSense

google.maps.adsense

Use Google AdSense to monetize your map
Uses the context of the map to show relevant ads

var adUnitDiv = document.createElement('div');
var adUnitOptions = {
  format: google.maps.adsense.AdFormat.HALF_BANNER,
  position: google.maps.ControlPosition.TOP_CENTER,
  publisherId: 'your_publisher_id',
  map: map,
  visible: true
};
adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);

Libraries: Places

google.maps.places

Autocomplete
- Attach autocomplete functionality to a text field.
- Same technology that powers Google Maps search field.
PlacesSearchService

Search for a place within a set of bounds or specify a LatLng and radius
Filter results by location name or type

Utility libraries

Open source libraries available at
google-maps-utility-library-v3.googlecode.com

Clustering
Custom Markers and InfoWindows
Route Boxing
Google Earth Integration
...and more!

Earth API

Browser plugin with a JavaScript API
Build web applications with Google Earth

Microsoft Windows 2000, XP, Vista	Apple Mac OS X 10.4+ Intel and PowerPC
Google Chrome	Google Chrome
Internet Explorer 6+	Safari 3.1+
Firefox 3.0+	Firefox 3.0+

Fusion Tables

Tool for storing, sharing and visualizing large amounts data
Cloud based database
Integration with the Maps API
Spatial query support
SQL-like query syntax and API

Fusion Tables: FusionTablesLayer in v3

Pass in a tableId and an optional query

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'shape',
    from: 198945,
    where: 'average_age > 40',
  },
  heatmap: true
});
layer.setMap(map);

What is a web service?

Access google data from your server or native code
- Where is this address on earth?
- How do I get from point A to point B?
- And more
JSON or XML
Do further computation, present appropriate result to user
Don't forget terms of service!
Most services available in JS API, too

Elevation

Earth elevation at points or along a path
Build cool apps:
- Visualize elevation profiles
- Clever bike ride or walk planning

http://maps.googleapis.com/maps/api/elevation/json
    ?sensor=false
    &path=0,0|0,10
    &samples=3

Elevation JSON response

{
  "status": "OK",
  "results": [ {
    "location": {
      "lat": 0.0000000,
      "lng": 0.0000000
    },
    "elevation": -5002.7587891
  }, {
    "location": {
      "lat": 0.0000000,
      "lng": 5.0000000
    },
    "elevation": -3738.8530273
  }, {
    "location": {
      "lat": 0.0000000,
      "lng": 10.0000000
    },
    "elevation": 33.7777786
  } ]
}

Distance matrices

Distance and time between sets of origins and destinations
Build advanced store finders and other creative apps

	San Francisco	Sacramento
LA	382 mi, 6 hrs 18 mins	384 mi, 6 hrs 22 mins
San Diego	502 mi, 8 hrs 17 mins	505 mi, 8 hrs 21 mins

http://maps.googleapis.com/maps/api/distancematrix/json
    ?sensor=false
    &origins=Los+Angeles|San+Diego
    &destinations=San+Francisco|Sacramento

Route optimization

Give your users the most efficient route through waypoints
Simply add optimize:true to your waypoint list
Origin and destination are held fixed
Response contains a waypoint_order field

http://maps.googleapis.com/maps/api/directions/json
    ?sensor=false
    &origin=Los+Angeles
    &waypoints=optimize:true|Dallas|Seattle|Akron|Phoenix
    &destination=New+York

LA to New York via Dallas, Seattle, Akron, and Phoenix

Bicycling directions

Efficient directions for bicycles
Simply add mode=bicycling to your request URLs

http://maps.googleapis.com/maps/api/directions/json
    ?sensor=false
    &origin=Oak+St+Santa+Monica+CA
    &destination=Hollywood+CA
    &mode=bicycling

SSL for everyone

Protect user and application data
Anyone can send SSL-protected web service requests
Supported by all of our web services
Send requests over HTTPS to maps.googleapis.com
No other changes need to be made

https://maps.googleapis.com/maps/api/geocode/json
    ?sensor=false
    &address=Sydney+Australia

Static Maps API

Map image without interactivity
- Markers
- Polylines
- Custom icons
Simply add an <img> tag to your page

http://maps.googleapis.com/maps/api/staticmap
    ?sensor=false
    &size=512x512
    &center=Australia
    &markers=Sydney|Melbourne|Perth|Adelaide|Alice+Springs

High-resolution static maps

Maps rendered with more detail
- Advanced mobile devices
- Printing
Scale up from normal size with 2x or 4x factor
- Add scale to URL, pixel size changes automatically
- Can also specify scale factor of custom icons

http://maps.googleapis.com/maps/api/staticmap
    ?sensor=false
    &size=512x512
    &center=Sydney
    &scale=2

High-resolution example: 1x scale

High-resolution example: 2x scale

Custom static map styles

Customize the presentation of map images
- Focus on particular data
- Match your branding
Simply add style parameters

http://maps.googleapis.com/maps/api/staticmap
    ?sensor=false
    &size=512x512
    &center=San+Francisco
    &style=feature:road|hue:0x00aaff

Summary

Many APIs
More than just maps and markers
Fusion Tables for storing your data
Earth API for awesomeness
Secure web services for your backend
Static maps when JS isn't an option

What's New in Google Geo APIs

User-facing APIs

Supporting APIs & developer tools

Location, location, location

Maps API v3

Maps API v3: Features

45° imagery

45° imagery

OverviewMapControl

OverviewMapControl

Markers: Marker animations

Markers: Marker animations

Layers

Layers

Draggable directions

Draggable directions

Street View

Street View: Overlays

Street View: Custom Street View

Libraries

Libraries: Geometry

Libraries: Geometry

Libraries: AdSense

Libraries: AdSense

Libraries: Places

Utility libraries

Earth API

Earth API

Earth API: Historical Imagery

Fusion Tables

Fusion Tables

Fusion Tables: FusionTablesLayer in v3

Fusion Tables: FusionTablesLayer in v3

What is a web service?

Elevation

Elevation JSON response

Distance matrices

Route optimization

LA to New York via Dallas, Seattle, Akron, and Phoenix

Bicycling directions

Bicycling directions example

SSL for everyone

Static Maps API

Static map example

High-resolution static maps

High-resolution example: 1x scale

High-resolution example: 2x scale

Custom static map styles

Custom style example: before

Custom style example: after

Summary

Thank You! - Q&A

What's New
in Google Geo APIs