New Features in Google Geo
Fusion Tables, Places API and
Custom Street View

Mano Marks, Senior Developer Advocate, Google

Hamburg JS Meetup
May 30th, 2011

@ManoMarks

Introduction

Agenda

Google Fusion Tables

In the Beginning there was code


Responses

The Promises

Fusion Tables

Mapping without code

Better mapping with code

Mapping without code

sample table

Features

Better mapping with code

Fusion Tables dynamic querying

Style in Code - new!

...      var australia = new google.maps.LatLng(-25, 133);
      map = ...
      layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'geometry',
          from: '815230'
        },
        styles: [{
          polygonOptions: {
            fillColor: "#00FF00",
            fillOpacity: 0.3
          }
        }, {
          where: "birds > 300",
          polygonOptions: {
            fillColor: "#0000FF"
          }
        }, {
          where: "population > 5",
          ...});
      layer.setMap(map);

Google Fusion Tables - SQL API

table

SELECT name FROM 790805 LIMIT 5;
name,address
FIRST CUP,"2911 VAN NESS AVE , 94109"
UNION STREET COFFEE ROASTERY,"2191 UNION ST , 94123"
NAPOLI PIZZA RESTAURANT,"1045 POLK ST , 94109"
WAYO,"1407 VAN NESS AVE , 94109"
MIFUNE RESTAURANT,"1737 POST ST , 94115"
        
demo

Google Fusion Tables - Nearest Neighbor

 SELECT * FROM 790805
 ORDER BY ST_Distance(
   address, LatLng(37.7832, -122.4035))
 LIMIT 5;  
demo

Google Fusion Tables - Nearest Neighbor

Google Fusion Tables - Intersections

Google Places API

Search and Autocomplete

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&
libraries=places"></script> <script type="text/javascript"> ... function initialize() { var myLatlng = new google.maps.LatLng(55.753222,37.621505); var myOptions = {...} ... places = new google.maps.places.PlacesService(map); google.maps.event.addListener(map, 'tilesloaded', tilesLoaded); autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete')); google.maps.event.addListener(autocomplete, 'place_changed', function() { showSelectedPlace(); }); } ... var place = autocomplete.getPlace(); markers[0] = new google.maps.Marker({position: place.geometry.location,map: map }); places.getDetails({ reference: result.reference}, showInfoWindow(i));

Places API

Places API methods of access

Checkin

Checkin Code

POST https://maps.googleapis.com/maps/api/place/check-in/json?sensor=true_or_false&key=api_key HTTP/1.1
Host: maps.googleapis.com

{
  "reference": "place_reference"
}
                          
POST https://maps.googleapis.com/maps/api/place/check-in/json?sensor=true&key=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI HTTP/1.1
Host: maps.googleapis.com

{
  "reference": "CmRRAAAATpOheNdDJDp5cdz1EGLqiGWhdrUnsyvn5plkWb6IbydAdnExNaDAdXBxRjhaFINDJU1UvLkVU5ZTFmUDsIDRrUCm-9Q7XLu6vi-bspAju4GG2XzRhv9ZBy9yJbK2PJVOEhD3QlprissY-rI0w3Ego93jGhSy7x8zDUYSrovufH1OxUGkcbjHBg"
}

Add/Delete Places

Add Place Code

POST https://maps.googleapis.com/maps/api/place/add/json?sensor=true_or_false&key=api_key HTTP/1.1
Host: maps.googleapis.com

{
  "location": {
    "lat": -33.8669710,
    "lng": 151.1958750
  },
  "accuracy": 50,
  "name": "Google Shoes!",
  "types": ["shoe_store"],
  "language": "en-AU"
}

Custom Street View

Street View: Overlays

Street View: Custom Street View

Custom Street View Demo


Liberty City

More Resources

Google I/O geo sessions

Secrets and surprises of the Google Geo APIs

Managing and visualizing your geospatial data with Fusion Tables

Connecting People and Places

Location Based App development using Google APIs

Designing Maps Applications for Usability on Mobile and Desktop

High Performance KML for Maps and Earth

GIS with Google Earth and Google Maps

Map your business, inside and out

Speedy Maps

Additional Resources

Creating Custom Maps with John Coryat

Simulating Markers with Tile Layers

Google Maps API Documentation

Google Places API Documentation

Google Fusion Tables

Questions

Mano Marks

@ManoMarks

@GoogleMapsAPI

@GoogleFT