KEMBAR78
Google Maps API - DevFest Karlsruhe | PDF
Google Maps API
Martin Kleppe / Ubilabs
Martin Kleppe | @aemkei
Maps API
> 150 Features
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
Location
var location = new google.maps.LatLng(
   49.026564,
   8.385753
);

var options = {
   zoom: 12,
   center: location,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(
   document.getElementById('map_canvas'),
   options
);
var geocoder = new google.maps.Geocoder();

var options = {
   address: "Erzbergerstraße 121, Karlsruhe"
};

geocoder.geocode(options, function(results, status) {
  map.setCenter(
     results[0].geometry.location
  );
});
navigator.geolocation.getCurrentPosition(success, error);

function success(position) {
  var location = new google.maps.LatLng(
     position.coords.latitude,
     position.coords.longitude
  );

    map.setCenter(location);
}

function error() { ... }
var input = document.getElementById('input');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds', map);

google.maps.event.addListener(
   autocomplete,
   'place_changed',
   function() {
     var place = autocomplete.getPlace();
     ...
   }
);
Custom Icons
var image = new google.maps.MarkerImage(
   'image.png',
   new google.maps.Size(20, 20),
   new google.maps.Point(0, 0),
   new google.maps.Point(10, 20)
);

var shadow = ...;

var shape = {
   coord: [5,5, 5,15, 15,15, 15,5],
   type: 'poly'
};

var marker = new google.maps.Marker({
  ...
  icon: image,
  shadow: shadow,
  shape: shape
});
Directions
var service = new google.maps.DirectionsService();

var request = {
   origin: from,
   destination: to,
   travelMode: google.maps.TravelMode.DRIVING
};

service.route(request, function(response, status) {
  ...
});
"duration" : {
   "text" : "35 mins",
   "value" : 2093
},

"duration_in_traffic" : {
  "text" : "46 mins",
  "value" : 2767
}
Elevation
var service = new google.maps.ElevationService();

var options = {
   path: latLngs,
   samples: 256
};

service.getElevationAlongPath(
   options,
   plotElevation
);

function plotElevation(results) {
  ...
});
Time Zones
https://maps.googleapis.com/maps/api/timezone/json?

  location=49.026564,8.385753&
  timestamp=135189720&
  sensor=false
{
    dstOffset: 0,
    rawOffset: 3600,
    status: "OK",
    timeZoneId: "Europe/Berlin",
    timeZoneName: "Central European Standard Time"
}
StreetView
var options = {
   position: location,
   pov: {
     heading: 165,
     pitch: 0,
     zoom: 1
   }
};

new google.maps.StreetViewPanorama(
   document.getElementById('pano'),
   options
);
45°
map.setTilt(45);
map.setHeading(90);
Places
https://maps.googleapis.com/maps/api/js?
  sensor=false&
  libraries=places
var input = document.getElementById('input');
var searchBox = new google.maps.places.SearchBox(input);

google.maps.event.addListener(
   searchBox,
   'places_changed',
   function() {
     var places = searchBox.getPlaces();
     ...
   }
);
Locale
https://maps.googleapis.com/maps/api/js?
  sensor=false&
  language=ja
Styled Maps
var styles = [
   {
     featureType: 'road',
     elementType: 'geometry',
     stylers: [
       { hue: -45 },
       { saturation: 100 }
     ]
   }
];

var mapOptions = {
   ...
   styles: styles
};
Natural Geography
Weather
var units = google.maps.weather.TemperatureUnit.FAHRENHEIT;

new google.maps.weather.WeatherLayer({
  temperatureUnits: units,
  map: map
});

new google.maps.weather.CloudLayer({
  map: map
});
BIG DATA
Clusterer
http://
google-maps-utility-library-v3.
googlecode.com
Fusion Tables
Heat Maps
var data = [
   new google.maps.LatLng(37.782551, -122.445368),
   new google.maps.LatLng(37.782745, -122.444586),
   new google.maps.LatLng(37.782842, -122.443688),
   ...
];

new google.maps.visualization.HeatmapLayer({
  data: data
});
Canvas Layer
github.com/ubilabs
Q&A
Google Maps API
Martin Kleppe / Ubilabs

Google Maps API - DevFest Karlsruhe

  • 1.
    Google Maps API MartinKleppe / Ubilabs
  • 2.
  • 9.
  • 10.
  • 11.
    Map MapTypeId ControlsMapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
  • 12.
    Map MapTypeId ControlsMapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
  • 13.
  • 15.
    var location =new google.maps.LatLng( 49.026564, 8.385753 ); var options = { zoom: 12, center: location, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById('map_canvas'), options );
  • 16.
    var geocoder =new google.maps.Geocoder(); var options = { address: "Erzbergerstraße 121, Karlsruhe" }; geocoder.geocode(options, function(results, status) { map.setCenter( results[0].geometry.location ); });
  • 17.
    navigator.geolocation.getCurrentPosition(success, error); function success(position){ var location = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ); map.setCenter(location); } function error() { ... }
  • 18.
    var input =document.getElementById('input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); google.maps.event.addListener( autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); ... } );
  • 20.
  • 22.
    var image =new google.maps.MarkerImage( 'image.png', new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(10, 20) ); var shadow = ...; var shape = { coord: [5,5, 5,15, 15,15, 15,5], type: 'poly' }; var marker = new google.maps.Marker({ ... icon: image, shadow: shadow, shape: shape });
  • 23.
  • 24.
    var service =new google.maps.DirectionsService(); var request = { origin: from, destination: to, travelMode: google.maps.TravelMode.DRIVING }; service.route(request, function(response, status) { ... });
  • 28.
    "duration" : { "text" : "35 mins", "value" : 2093 }, "duration_in_traffic" : { "text" : "46 mins", "value" : 2767 }
  • 29.
  • 32.
    var service =new google.maps.ElevationService(); var options = { path: latLngs, samples: 256 }; service.getElevationAlongPath( options, plotElevation ); function plotElevation(results) { ... });
  • 33.
  • 35.
  • 36.
    { dstOffset: 0, rawOffset: 3600, status: "OK", timeZoneId: "Europe/Berlin", timeZoneName: "Central European Standard Time" }
  • 37.
  • 39.
    var options ={ position: location, pov: { heading: 165, pitch: 0, zoom: 1 } }; new google.maps.StreetViewPanorama( document.getElementById('pano'), options );
  • 40.
  • 43.
  • 44.
  • 46.
  • 47.
    var input =document.getElementById('input'); var searchBox = new google.maps.places.SearchBox(input); google.maps.event.addListener( searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); ... } );
  • 49.
  • 52.
  • 53.
  • 59.
    var styles =[ { featureType: 'road', elementType: 'geometry', stylers: [ { hue: -45 }, { saturation: 100 } ] } ]; var mapOptions = { ... styles: styles };
  • 62.
  • 65.
  • 67.
    var units =google.maps.weather.TemperatureUnit.FAHRENHEIT; new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map }); new google.maps.weather.CloudLayer({ map: map });
  • 68.
  • 69.
  • 71.
  • 72.
  • 75.
  • 77.
    var data =[ new google.maps.LatLng(37.782551, -122.445368), new google.maps.LatLng(37.782745, -122.444586), new google.maps.LatLng(37.782842, -122.443688), ... ]; new google.maps.visualization.HeatmapLayer({ data: data });
  • 79.
  • 81.
  • 85.
  • 87.
    Google Maps API MartinKleppe / Ubilabs