What are we learning today?

Google Maps API

Before we get started...

+

=

Awesome!

A Map!

HTML

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
}

#map {
  height: 100%;
}
</style>

JavaScript

<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
/**
 * Called on the intial page load.
 */
function init() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: new google.maps.LatLng(-33.866, 151.195),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}

// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
</script>

A Map!

Mobile Map!

Geolocation

Javascript

function getUsersLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude);
      map.panTo(pos);
    }, function() {
      // Can find the users location
    });
  }
}

Markers

Javascript

var userLocationMarker = new google.maps.Marker();

navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude);
  map.panTo(pos);
  userLocationMarker.setPosition(pos);
  userLocationMarker.setMap(map);
}, function() {
  // Can find the users location
});

Custom Markers

Javascript

var icon = new google.maps.MarkerImage('my-location.png',
  new google.maps.Size(14, 14), // Image Size
  new google.maps.Point(0, 0), // Origin
  new google.maps.Point(7, 7)); // Anchor

var userLocationMarker = new google.maps.Marker({
  icon: icon
});

Overlays

Javascript

var accuracyCircle = new google.maps.Circle({
  fillColor: '#0000ff',
  fillOpacity: 0.1,
  strokeColor: '#0000ff',
  strokeOpacity: 0.3,
  strokeWeight: 1
});

accuracyCircle.bindTo('center', userLocationMarker, 'position');

function getUsersLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude);
      map.panTo(pos);
      userLocationMarker.setPosition(pos);
      accuracyCircle.setRadius(position.coords.accuracy);
      accuracyCircle.setMap(map);
      ...

Custom Controls

CSS

.button {
  background: #fff;
  border: 1px solid #000;
  margin-top: 5px;
  -webkit-box-shadow: inset -1px -1px 1px #707070;
  font: 12px Arial, sans-serif;
  padding: 1px 4px;
  cursor: pointer;
}

Javascript

var userLocation;
navigator.geolocation.watchPosition(setUsersPosition);

function setUsersPosition(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude);
  userLocation = pos;
  userLocationMarker.setPosition(pos);
  accuracyCircle.setRadius(position.coords.accuracy);
}

function addGoToUsersLocationButton() {
  var button = document.createElement('DIV');
  button.className = 'button';
  button.innerHTML = 'My Location';
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(button);
  google.maps.event.addDomListener(button, 'click', function() {
    if (userLocation) {
      map.panTo(userLocation);
    }
  });
}

What do we have so far?

Adding a shop

Javascript

function addAddNewShopButton() {
  var button = document.createElement('DIV');
  button.className = 'button';
  button.innerHTML = 'Add Shop';
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(button);

  google.maps.event.addDomListener(button, 'click', showNewShopForm);
}

Using jQuery

function addNewShopButton() {
  var button = $('<div class="button">Add Shop</div>');
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(button[0]);
  $(button).click(showNewShopForm);
}

Javascript

var newShopMarker;
var newShopInfoWindow;

function addMarkerAndInfoWindow() {
  var formHTML = ''<div id="add-new-shop-form">...</div>';
  newShopInfoWindow = new google.maps.InfoWindow({
    content: formHTML
  });

  newShopMarker = new google.maps.Marker();

  google.maps.event.addListener(map, 'click', function(mouseEvent) {
    newShopMarker.setPosition(mouseEvent.latLng);
  });
}

function showNewShopForm() {
  newShopMarker.setPosition(map.getCenter());
  newShopMarker.setMap(map);
  newShopInfoWindow.open(map, newShopMarker);
}

Reverse Geocoding

Javascript

function reverseGeocodeNewShopMarker() {
  var geocoder = new google.maps.Geocoder();
  var request = {latLng: newShopMarker.getPosition()};

  geocoder.geocode(request, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var address = results[0].formatted_address;
      document.getElementById('new-shop-address').value = address;
    }
  });
}

google.maps.event.addListener(map, 'click', function(e) {
  ...
  reverseGeocodeNewShopMarker();
});

Saving a shop

Javascript

var shopIcon = new google.maps.MarkerImage('coffee.png',
  new google.maps.Size(32, 37));

function saveShop() {
  var position = newShopMarker.getPosition();

  // Gather form values and AJAX post to save the store

  newShopMarker.setMap(null);
  newShopInfoWindow.close();

  var marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: shopIcon
  });
}

google.maps.event.addListener(newShopInfoWindow, 'domready', function() {
  var saveButton = document.getElementById('new-shop-save');
  google.maps.event.addDomListener(saveButton, 'click', saveShop);
});

Finding Shops

Javascript

google.maps.event.addListener(map, 'idle', loadStoresInView);

function loadStoresInView() {
  var bounds = map.getBounds().toUrlValue();

  // Do an AJAX call to get stores in the bounds
  // Call addStores on success
}

Javascript

function addStores(shops) {
  var d = new Date();
  var wasAdded = d.getTime();
  for (var i = 0, shop; shop = shops[i]; i++) {
    if (shopMarkers[shop.key]) {
      shopMarkers[shop.key]._wasAdded = wasAdded;
    } else {
      var marker = addStoreMarker(shop);
      marker._wasAdded = wasAdded;
      shopMarkers[shop.key] = marker;
    }
  }

  for (var key in shopMarkers) {
    if (shopMarkers[key]._wasAdded != wasAdded) {
      shopMarkers[key].setMap(null);
      delete shopMarkers[key];
    }
  }
}

Javascript

function addStoreMarker(shop) {
  var position = new google.maps.LatLng(shop.lat, shop.lng);
  var marker = new google.maps.Marker({
    position: position,
    map: map,
    title: shop.name,
    icon: shopIcon
  });
  return marker;
}

Directions

Javascript

var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({
  suppressMarkers: true,
  map: map
});

function getDirectionsTo(shop) {
  var request = {
    origin: userLocationMarker.getPosition(),
    destination: shop.address,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
    }
  });
}

whereiscoffee.appspot.com

Places API

Javascript

function getPlaces() {
  var data = {
    location: newShopMarker.getPosition().toUrlValue(),
    radius: 100
  };

  $.post('/places', data, function(data) {
    populatePlaces(data);
  });
}

function populatePlaces(places) {
  if (places.status == 'OK') {
    for (var i = 0, place; place = places.results[i]; i++) {
      if (place.types.indexOf('establishment') != -1) {
        // Add result.name to a select box
      }
    }
  }
}

Places API - Python

location = self.request.get('location')
radius = self.request.get('radius')

url_to_sign = ('/maps/api/place/search/json?location=%s&'
  'radius=%s&client=%s&sensor=true') % (location, radius, CLIENT_ID)

decodedKey = base64.urlsafe_b64decode(PRIVATE_KEY)
signature = hmac.new(decodedKey, url_to_sign, hashlib.sha1)
encoded_signature = base64.urlsafe_b64encode(signature.digest())

places_url = ('http://maps.google.com/maps/api/place/search/json?location'
  '=%s&radius=%s&client=%s&sensor=true&'
  'signature=%s') % (location, radius, CLIENT_ID, encoded_signature)

self.response.out.write(urlfetch.fetch(places_url).content)

What Did We Learn?

Map
Markers, Overlays, Controls
Map Events
Getting User's Location
Geocoding
Directions
Places API

What else is there?

Polys
Elevation service
Traffic & Bicycling layers
KML & Fusion tables layers
Styled maps
Street view
Custom map types
...

Styled Maps

var stylez = [{
  featureType: 'road.local',
  elementType: 'geometry',
  stylers: [{
    hue: '#00ff00'
  }, {
    saturation:100  
  }]
}, {
  featureType: 'landscape',
  elementType: 'geometry',
  stylers: [{
    hue: '#000000'
  }]
}];
  
var styledMapType =  new google.maps.StyledMapType(stylez, {
  map: map,
  name: 'Coffee Map!'
});

map.mapTypes.set('coffee-style', styledMapType);
map.setMapTypeId('coffee-style');

Custom Street View

function getCustomTileUrl(pano, x, y, z) {
  return 'http://my_server/tiles/tile_' + z + '_' + x + '_' + y + '.jpg';
};

Lastly

http://code.google.com/apis/ maps/documentation/javascript/

http://whereiscoffee.appspot.com

Questions?