Upload
hippoi67
View
244
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Manual de la API de google Map
Citation preview
Martin Kleppe / Ubilabs
Google Maps API
@aemkeiMartin Kleppe |
Maps API
> 150 Features> 150 Features
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions 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();
geocoder.geocode(options, function(results, status) { map.setCenter( results[0].geometry.location );});
var options = { address: "Erzbergerstrae 121, Karlsruhe" };
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.CloudLayer({ map: map});
new google.maps.weather.WeatherLayer({ temperatureUnits: units, 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
Martin Kleppe / Ubilabs
Google Maps API