Maps Architecture - 2005

The First Mashup

Maps Architecture - 2005

Maps Architecture - 2012

Maps Architecture - 2012

House Locator

Easy Setup - Code


var dataFeed = new storeLocator.StaticDataFeed();
jQuery.get('houses.json', function(houses) {
  //create list of StoreLocator.Store objects for each house
  dataFeed.setStores(houses);
});

var view = new storeLocator.View(map, dataFeed, {
  geolocation: false,
  features: data.getFeatures()
});

var panelDiv = document.getElementById('panel');
new storeLocator.Panel(panelDiv, {
  view: view
});
      

Custom Icons

Custom Icons - Code




var ICON1 = 'images/house.png'
var ICON2 = new google.maps.MarkerImage(
            'house.png', null, null, new google.maps.Point(14, 13));

var ICON3 = {
  path: google.maps.SymbolPath.CIRCLE,
  scale: 10
};

view.createMarker = function(store) {
  var markerOptions = {
    position: store.getLocation(),
    icon: ICON1,
    title: store.getDetails().title
  };
  return new google.maps.Marker(markerOptions);
}

Base Map

Base Map - Code



         
  map.set('mapTypeId', google.maps.MapTypeId.SATELLITE)
                                             //ROADMAP
                                             //TERRAIN
                                             //SATELLITE
                                             //HYBRID
     
  //valid when in satellite mode, and if map.getTilt() == 45;
  map.setHeading(90); 
       

Layers

Layers - Code




 var bikeLayer = new google.maps.BicyclingLayer();
 bikeLayer.setMap(map);

                             //TransitLayer();
                             //TrafficLayer();
                             //WeatherLayer();

 var panoramioLayer = new google.maps.PanoramioLayer();
 panoramioLayer.setTag('bridges');

       

Custom Styles

Custom Styles - Code




var fadedStyles = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  }
];

map.setOptions({styles: fadedStyles});
       

Directions

Direction - Code




  var request = {
      origin:start, 
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.TRANSIT
  };

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

Direction - Web Service



 //snip
"travel_mode" : "TRANSIT",
"html_instructions" : "Bus towards Ocean Beach",
"transit_details" : {
   "num_stops" : 32,
   //snip arrival stop
   "arrival_time" : {
      "text" : "1:26pm",
      "time_zone" : "America/Los_Angeles",
      "value" : 1340828810
   },
   "headsign" : "Ocean Beach",
   "line" : {
      "agencies" : //snip
      "name" : "Fulton",
      "short_name" : "5",
      "vehicle" : {
         "icon" : "//maps.gstatic.com/mapfiles/transit/iw/6/bus.png",
         "name" : "Bus",
         "type" : "BUS"
      }
   },
   //snip
       

Distance Matrix

Distance Matrix

Distance Matrix - Code

var workplace = 'Google Inc., San Francisco'
var house1 = 'Moscone Center, San Francisco'
var house2 = new google.maps.LatLng(37.5,-122.5)

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix( {
    origins: [workplace],
    destinations: [house1, house2],
    travelMode: google.maps.TravelMode.DRIVING,
  }, callback);

function callback(response, status) {
  //all results in a single row
  distances = response.rows[0].elements;
  // ...
} 

Optimized Directions

Optimized Directions - Code

var directionsService = new google.maps.DirectionsService();

var start = 'Moscone Center, San Francisco';
var end = 'Google Inc, San Francisco';

function calcRoute() {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING,
    optimizeWaypoints: true,
    avoidTolls: true
  };

  directionsService.route(request, function(result, status) {
    // ...
  });
}

Places

Places

Places: Tips

  • Quick check on local density
  • Keyword filtering includes description, reviews
  • Ordering by distance vs prominence
  • Other services can combine to add value to places
  • Don't miss the next session

Elevation

  var elevator = new google.maps.ElevationService();
  // set up elevation req
  var pathRequest = {
    'path': route.overview_path,
    'samples': 500
  }
  // Initiate the path request.
  elevator.getElevationAlongPath(pathRequest, displayElevation);

  function displayElevation(results){
    for (var i = 0; i < results.length; ++i) {
      var height = results[i].elevation;
      // create symbols along polyline
    }
  }

      

Bring the 3D

<Thank You!>

plus.naghdy.com

plus.beardedmaps.com | @jlivni