SlideShare a Scribd company logo

Google Maps Api

Anas Alpure, profile picture
Anas Alpure

This document discusses various Google Maps APIs and services including: 1. The JavaScript API which allows embedding maps and building mapping applications. 2. Common classes and methods for maps, markers, info windows, and other objects. 3. Additional libraries for geometry, places, and drawing. 4. Services for geocoding, elevation, and static maps. 5. Examples of customizing maps, adding interactivity, and integrating additional location-based features.

Software
1 of 45
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Services( SOAP and REST) Webservice is the type of API over HTTP protocol. application programming interface (API) Web services APIs
Google Maps Api
Google Maps Api
addListener bindTo get notify set setValues unbind unbindAll MVCObject class google.maps.MVCObject
https://maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxx Google API https://github.com/googlemaps/google-maps-services-js https://console.developers.google.com/apis/ • Standard Plan (free) • Premium Plan (paid) https://maps.googleapis.com/maps/api/js?client=CLIENT_ID&v=3.32&.. CLIENT_ID = gme-[company] & proj-[number] ([type]) //https://github.com/udacity/ud864 Maps java script api
Map class methods : fitBounds getBoundsfitBounds getCenterfitBounds getClickableIconsfitBounds getDivfitBounds getHeadingfitBounds getMapTypeIdfitBounds getProjectionfitBounds getStreetViewfitBounds getTiltfitBounds getZoomfitBounds panBy panTo fitBounds panToBounds setCenter setClickableIcons setHeading setMapTypeId setOptions setStreetView setTilt setZoom Marker class Methods: getAnimation getClickable getCursor getDraggable getIcon getLabel getMap getOpacity getPosition getShape getTitle getVisible getZIndex setAnimation setClickable setCursor setDraggable setIcon setLabel setMap setOpacity setOptions setPosition setShape setTitle setVisible setZIndex InfoWindow class Methods: close getContent getPosition getZIndex open setContent setOptions setPosition setZIndex
create Map class map = new google.maps.Map(document.getElementById('map'), { center: {lat: 35.5407, lng: 35.7953}, zoom: 13, mapTypeId : google.maps.MapTypeId.SATELLITE // satellite }); map = new google.maps.Map( mapDiv [ , opts] ) //opts is MapOptions interface https://developers.google.com/maps/documentation/javascript/reference mapTypeId constants : //add widget as input field to map map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar') );
Var styles ={...} var map = new window.google.maps.Map(document.getElementById('map'), { center: {lat: 25.203041406382805, lng: 55.275247754990005}, zoom: 13, styles :styles , zoomControlOptions: { position: window.google.maps.ControlPosition.RIGHT_BOTTOM, style: window.google.maps.ZoomControlStyle.SMALL }, streetViewControlOptions: { position: window.google.maps.ControlPosition.RIGHT_CENTER }, mapTypeControl: false, });
Lat range [-90, 90] Lng range [-180, 180] var marker = new google.maps.Marker({ position: {lat: 35.540, lng: 35.79}, title: 'i am anas alpure', animation: google.maps.Animation.DROP, id: 10 , // map: map, draggable:true, icon: image }); marker.setMap(map); var bounds = new google.maps.LatLngBounds(); bounds.extend( {lat: 35.540, lng: 35.792}); bounds.extend( {lat:35.5540, lng: 35.790}); LatLngBounds class Methods: contains equals extend getCenter getNorthEast getSouthWest intersects isEmpty toJSON toSpan toString toUrlValue A LatLngBounds instance represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian. Marker map.fitBounds(bounds);
marker.addListener('click', function() { var infowindow = new google.maps.InfoWindow(); infowindow.marker = marker; infowindow.setContent('<div>' + View restaurant + '</div>'); infowindow.open(map, marker); // Make sure the marker property is cleared if the infowindow is closed. infowindow.addListener('closeclick', function() { infowindow.marker = null; }); }); InfoWindow The InfoWindow constructor takes an InfoWindowOptions object literal [InfoWindowOptions interface] (optional) InfoWindowOptions interface Properties: • content • disableAutoPan • maxWidth • pixelOffset • position • zIndex var infowindow = new google.maps.InfoWindow({ content : '<h1>anas alpure</h1>' , maxWidth : 400 , position : {lat:35.5540, lng: 35.790} });
Coordinates new google.maps.LatLng(-34, 151) // {lat:-34, lng: 151} LatLng classMethods: • equals • lat • lng • toJSON • toString • toUrlValue Point class Methods: equals , toString Properties: x , y Size class Methods: equals, toString Properties: height , width map.addListener('click' ,(e)=>console.log( e.latLng.toJSON() ) )
var defaultIcon = makeMarkerIcon('0091ff'); var highlightedIcon = makeMarkerIcon('FFFF24'); var marker = new google.maps.Marker({ // MarkerOptions interface position: position, title: title, animation: google.maps.Animation.DROP, icon: defaultIcon, id: i }); marker.addListener('mouseover', function() { this.setIcon(highlightedIcon); }); marker.addListener('mouseout', function() { this.setIcon(defaultIcon); }); function makeMarkerIcon(markerColor) { var markerImage = new google.maps.MarkerImage( 'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +'|40|_|%E2%80%A2', new google.maps.Size(21, 34), new google.maps.Point(0, 0), new google.maps.Point(10, 34), new google.maps.Size(21,34) ); return markerImage; } MarkerOptions interface : • anchorPoint • animation • clickable • crossOnDrag • cursor • draggable • icon • label • map • opacity • position • shape • title • visible
makeMarkerIcon(markername) { var url =`/assets/${markername}`.png`; var image = { url, size: new window.google.maps.Size(40, 40), origin: new window.google.maps.Point(0, 0), anchor: new window.google.maps.Point(17, 34), scaledSize: new window.google.maps.Size(40, 40) }; return image; }
https://mapstyle.withgoogle.com/
var styles = [ { "featureType": "road.highway", "elementType": "geometry.fill", "stylers" : [ { "color": "#f74d44" }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers" : [ { "color": "#4f5fec" } ] } ] map = new google.maps.Map( Div , {styles: styles}); featureType administrative landscape points of interest road transit water Country Province Locality Neighborhood Land parcel Element type : Geometry - Fill - Stroke Labels -Text -- Text fill -- Text outline Icon
The Maps Static API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Maps Static API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300& maptype=roadmap & markers=color:blue%7Clabel:S%7C40.702147,-74.015794& markers=color:green%7Clabel:G%7C40.711614,-74.012318 & markers=color:red%7Clabel:C%7C40.718217,-73.998284 & key=YOUR_API_KEY Maps Static API
Embed map Return map as frame embed in html page <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJfWDUYS2sJhUR3pVBofhbMo4&key=..." allowfullscreen> </iframe>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx&libraries=geometry&v=3&callback=initMap"> </script> panorama The Street View API lets you embed a static (non-interactive) Street View panorama StreetViewPanorama class Methods: getLinks getLocation getMotionTracking getPano getPhotographerPov getPosition getPov getStatus getVisible getZoom registerPanoProvider setLinks setMotionTracking setOptions setPano setPosition setPov setVisible setZoom google.maps.StreetViewPanorama google.maps.StreetViewService getPanorama(request, callback)v3.34 Parameters: • request: StreetViewLocationRequest|StreetViewPanoRequest • callback: function(StreetViewPanoramaData, StreetViewStatus) Return Value: None
function populateInfoWindow(marker, infowindow) { if (infowindow.marker != marker) { infowindow.setContent(''); infowindow.marker = marker; infowindow.addListener('closeclick', function() { infowindow.marker = null; }); var streetViewService = new google.maps.StreetViewService(); function getStreetView(data, status) { if (status == google.maps.StreetViewStatus.OK) { var nearStreetViewLocation = data.location.latLng; var heading = google.maps.geometry.spherical.computeHeading( nearStreetViewLocation, marker.position ); infowindow.setContent('<div>' + marker.title + '</div><div id="pano"></div>'); var panoramaOptions = { position: nearStreetViewLocation, pov: { heading: heading, pitch: 30 } }; var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), panoramaOptions); } else { infowindow.setContent('<div>' + marker.title + '</div>' + '<div>No Street View Found</div>'); } } // radius =50 meters of the markers position var radius = 50; streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView); infowindow.open(map, marker); } } var infowindow = new google.maps.InfoWindow(); marker.addListener('click', function() { populateInfoWindow(this, infowindow ); }); {lat: 35.540, lng: 35.79}
var heading = google.maps.geometry.spherical.computeHeading(position1 , position2 ); Heading (Number) Direction of travel , specified in degrees counting clockwise relative to the true north
Drawing on the map
// Initialize the drawing manager var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }, markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); drawingManager.addListener('polylinecomplete', function(poly) { console.log ( poly.getPath() ) }); Drawing on the map
var map = new google.maps.Map( ... ) ; var polylineCoordinates = [ {lat: 35.52379969181, lng: 35.782901931} , {lat: 35.53057537818, lng: 35.771486450} , {lat: 35.51488532952, lng: 35.769038738} , {lat: 35.5133365776, lng: 35.784380805} , {lat: 35.52379969181, lng: 35.782901931} ]; var polyline = new google.maps.Polyline({ path: polylineCoordinates, geodesic: true, strokeColor: '#e46060', strokeOpacity: 1.0, strokeWeight: 2 }); polyline.setMap(map);
LIBRARIES that the Google Maps APIs has Geometry ,Places , and Drawing! Geometry library : The geometry library can be loaded by specifying “libraries=geometry” when loading the JavaScript API in your site. This library does not contain any classes, but rather, contains methods within three namespaces : • spherical contains spherical geometry utilities allowing you to compute angles, distances and areas from latitudes and longitudes. • encoding contains utilities for encoding and decoding polyline paths according to the Encoded Polyline Algorithm. • poly contains utility functions for computations involving polygons and polylines. <script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx &libraries=geometry,places &v=3&callback=initMap"> </script> The google.maps.geometry library does not contain any classes; instead, the library contains static methods on the above namespaces. //hides marker outside the polygon if (google.maps.geometry.poly.containsLocation(marker.position, polygon)) { marker.setMap(map); } else { marker.setMap(null); }
Geolocation: Displaying User or Device Position on Maps // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position)=> { var pos = { lat: position.coords.latitude, lng: position.coords.longitude } console.log( pos ); }); } else { console.log( 'Browser doesn't support Geolocation' ); }
Geocoding web service is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map, or position the map. Geocoding https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters https://maps.googleapis.com/maps/api/geocode/json? address=1600+Amphitheatre+Parkway,+Mountain+View,+CA& key=YOUR_API_KEY https://maps.googleapis.com/maps/api/geocode/json? latlng=33.1262476,-117.3115765& key=AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY google.maps.Geocoder { "results" : [ { "address_components" : [... ], "formatted_address" : "1 Legoland Dr, Carlsbad, CA 92008, USA "geometry" : { "location" : { "lat" : 33.1262496, "lng" : -117.3119239 }, "location_type" : "ROOFTOP", "viewport" : { "northeast" : { "lat" : 33.1275985802915, "lng" : -117.3105749197085 }, "southwest" : { "lat" : 33.12490061970851, "lng" : -117.3132728802915 } } }, "place_id" : "ChIJKd0j4hxz3IARYwXlnyp1OhY", "types" : [ "street_address" ] } ], "status" : "OK" } {}{} …..
function zoomToArea(address = ' ‫الجنوبي‬ ‫الكورنيش‬ ' ){ //Initialize the geocoder. var geocoder = new google.maps.Geocoder(); // Get the address or place that the user entered. geocoder.geocode( { address: address, componentRestrictions: { country: 'SYRIA'} } , function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.setZoom(15); } else { window.alert('We could not find that location - try entering a more' + ' specific place.'); } } ); } • address: string, • location: LatLng, • placeId: string, • bounds: LatLngBounds, • componentRestrictions: GeocoderComponentRestrictions, • region: string Geocoding
Elevation API https://maps.googleapis.com/maps/api/elevation/outputFormat?parameters https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=YOUR_API_KEY { "results" : [ { "elevation" : 1608.637939453125, "location" : { "lat" : 39.73915360, "lng" : -104.98470340 }, "resolution" : 4.771975994110107 } ], "status" : "OK" } var elevator = new google.maps.ElevationService; elevator.getElevationForLocations( { 'locations': {"lat" : 33.96,"lng" : -117.39} }, function(results, status) { ... } )
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 63.333, lng: -150.5}, // Denali. mapTypeId: 'terrain' }); var elevator = new google.maps.ElevationService; var infowindow = new google.maps.InfoWindow({map: map}); map.addListener('click', function(event) { displayLocationElevation(event.latLng, elevator, infowindow); }); } function displayLocationElevation(location, elevator, infowindow) { elevator.getElevationForLocations({ 'locations': [location] }, function(results, status) { infowindow.setPosition(location); if (status === 'OK') { if (results[0]) { infowindow.setContent('The elevation at this point <br>is ' + results[0].elevation + ' meters.'); } else { infowindow.setContent('No results found'); } } else { infowindow.setContent('Elevation service failed due to: ' + status); } }); } Event object
var origin1 = new google.maps.LatLng(55.930385, -3.118425); var origin2 = 'Greenwich, England’; var origin3 = ‘4800 EL camino real ,los altos , ca’; var destinationA = ‘2465 lathem street , mountain view ,CA'; var destinationB = new google.maps.LatLng(50.087692, 14.421150); var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix( { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: 'DRIVING', transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, avoidHighways: Boolean, avoidTolls: Boolean, }, callback); function callback(response, status) { // See Parsing the Results for console.log(response) } Travel Modes : • BICYCLING • DRIVING • TRANSIT • WALKING Distance Matrix Service unitSystem : google.maps.UnitSystem.METRIC (default) google.maps.UnitSystem.IMPERIAL
var origin = '4800 EL camino real ,los altos , ca'; var destination= '2465 lathem street , mountain view ,CA'; var distanceService = new google.maps.DistanceMatrixService(); distanceService.getDistanceMatrix( { origins: [origin], destinations: [destination], travelMode: 'BICYCLING', unitSystem : google.maps.UnitSystem.IMPERIAL } , (response, status)=>{ console.log(response) } );
Google Maps API Directions Service which receives direction requests and returns an efficient path. Directions Service { origin: LatLng | String | google.maps.Place, destination: LatLng | String | google.maps.Place, travelMode: TravelMode, transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidFerries: Boolean, avoidHighways: Boolean, avoidTolls: Boolean, region: String } DirectionsRequest interface contains { origin: 'Hoboken NJ', destination: 'Carroll Gardens, Brooklyn', travelMode: 'TRANSIT', transitOptions: { departureTime: new Date(1337675679473), modes: ['BUS'], routingPreference: 'FEWER_TRANSFERS' }, unitSystem: google.maps.UnitSystem.IMPERIAL } transitOptions arrivalTime departureTime modes routingPreference BUS RAIL SUBWAY TRAIN TRAM google.maps.DirectionsService
Directions Service var directionsService = new google.maps.DirectionsService(); var directionsrender = new google.maps.DirectionsRenderer(); var map = new google.maps.Map( ... ); directionsrender.setMap(map); var request = { origin: 'chicago, il' , destination: 'gallup, nm' , travelMode: 'BICYCLING' }; directionsService.route(request,function(result, status){ if (status == 'OK') { directionsrender.setDirections(result); } }); DirectionsRendererOptions interface : directions draggable infoWindow map markerOptions polylineOptions ...
The Directions service can return multi-part directions using a series of waypoints. Waypoints alter a route by routing it through the specified location(s). var request = { origin: 'Florence, IT' , destination: 'Milan, IT' , travelMode: 'DRIVING', waypoints: [ { location: 'Genoa, IT', stopover: true },{ location: 'Bologna, IT', stopover: true },{ location: 'venice , IT', stopover: true } ], //rearranging the waypoints in a more efficient order. optimizeWaypoints:true }; directionsService.route(request,function(result, status){ if (status == 'OK') { directionsrender.setDirections(result); } }); ➢ Waypoints are not supported for the TRANSIT travel mode
Roads API• Snap to roads • Nearest roads • Speed limits (APIs Premium Plan customers) this API is available via a simple HTTPS interface, https://roads.googleapis.com/v1/snapToRoads?parameters&key=YOUR_API_KEY https://roads.googleapis.com/v1/snapToRoads? path=-35.27801,149.12958|-35.28032,149.12907|-35.28099,149.12929|-35.28144,149.12984|-35.28194,149.13003| &key=AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY https://roads.googleapis.com/v1/nearestRoads?parameters&key=YOUR_API_KEY https://roads.googleapis.com/v1/speedLimits?parameters&key=YOUR_API_KEY
Roads API var apiKey ='AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY'; var pathValues = ['35.27801,149.12958','-35.28032,149.12907','-35.28099,149.12929','-35.28144,149.12984','-35.28282,149.12956'] var snappedCoordinates ; var placeIdArray ; $.get('https://roads.googleapis.com/v1/snapToRoads’, { //$ jQuery library interpolate: true, key: apiKey, path: pathValues.join('|') }, processSnapToRoadResponse ); // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude ); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } }
Placesgoogle.maps.places google.maps.places.Autocomplete(input, options) function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude } var circle = new google.maps.Circle({ center: geolocation, radius: 3000 }); autocomplete.setBounds(circle.getBounds()); }); } } var autocomplete = new google.maps.places.Autocomplete( document.getElementById('search-text-input') ,{ types: ['(cities)'], componentRestrictions: {country: 'fr’} , //bounds: LatLngBounds });
var placeMarkers=[] ; function hideMarkers(m){...} function createMarkersForPlaces(p){...} var searchBox = new google.maps.places.SearchBox(document.getElementById('places-search')); // Bias the searchbox to within the bounds of the map. searchBox.setBounds(map.getBounds()); searchBox.addListener('places_changed', function() { //hide all marker in placeMarkers hideMarkers(placeMarkers); var places = searchBox.getPlaces(); // For each place, get the icon, name and location. createMarkersForPlaces(places); if (places.length == 0) { window.alert('We did not find any places matching that search!'); } });
// It will do a nearby search using the entered query string or place. function textSearchPlaces(searchValue) { var bounds = map.getBounds(); hideMarkers(placeMarkers); var placesService = new google.maps.places.PlacesService(map); placesService.textSearch({ query: searchValue, bounds: bounds }, function(results, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { createMarkersForPlaces(results); } }); } Places Place PlacesService -> Place Searches : • nearbySearch • findPlaceFromQuery • textSearch • ..
var request = { query: 'Museum of Contemporary Art Australia', fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'], }; placesService = new google.maps.places.PlacesService(map); placesService.findPlaceFromQuery( request , function (results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarkersForPlaces(results); } }); Places placesService.nearbySearch(request, callback); parameter TextSearch nearbySearch findPlaceFromQuery query Requered Location and radius Or bounds required locationBias optional Location and radius Or bounds optional rankBy optional optional optional keyword optional optional optional fields optional optional required
Place Details Requests placesService = new google.maps.places.PlacesService(map); placesService.getDetails({ placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4', fields: ['name', 'rating', 'formatted_phone_number', 'geometry'] //can add photos }, function (place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { console.log(place); } });
Time Zone API You request the time zone information for a specific latitude/longitude pair and date. The API returns the name of that time zone, the time offset from UTC, and the daylight savings offset. //$ jQuery library $.get('https://maps.googleapis.com/maps/api/timezone/json', { location : '51.5073509,-0.1277582999' , //timestamp :'1458000000' , key : 'AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY' }, function(data){ console.log(data) } );
Google Maps Api
Google Maps Api
GitHub account : https://github.com/anasalpure Linked In account : https://www.linkedin.com/in/anasalpure/ Email : infomix82@gmail.com By Anas Alpure

More Related Content

PPTX
Google maps api 3
Muhammad Younis
 
PDF
Google Maps JS API
Alberto Simões
 
PDF
Google Maps API for Android
Maksim Golivkin
 
PPT
Google Maps API
Rafael Mumme
 
PDF
Google Maps API - DevFest Karlsruhe
Martin Kleppe
 
PPTX
Getting Started with Geospatial Data in MongoDB
MongoDB
 
PDF
PostGIS 시작하기
Byeong-Hyeok Yu
 
PDF
Geolocation and Mapping
Ivano Malavolta
 
Google maps api 3
Muhammad Younis
 
Google Maps JS API
Alberto Simões
 
Google Maps API for Android
Maksim Golivkin
 
Google Maps API
Rafael Mumme
 
Google Maps API - DevFest Karlsruhe
Martin Kleppe
 
Getting Started with Geospatial Data in MongoDB
MongoDB
 
PostGIS 시작하기
Byeong-Hyeok Yu
 
Geolocation and Mapping
Ivano Malavolta
 

What's hot (20)

PPTX
QGIS 활용
Sungjin Kang
 
PPTX
공간SQL을 이용한 공간자료분석 기초실습
BJ Jang
 
PPTX
공간정보연구원 PostGIS 강의교재
JungHwan Yun
 
PDF
QGIS 실습 (총 7차시)
Byeong-Hyeok Yu
 
PDF
전자해도 표준과 뷰어 (최규성)
Kyu-sung Choi
 
PPTX
API Design- Best Practices
Prakash Bhandari
 
PPTX
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
HaNJiN Lee
 
PPTX
mago3D 기술 워크샵 자료(한국어)
SANGHEE SHIN
 
PDF
Angular Dependency Injection
Nir Kaufman
 
PPTX
오픈소스GIS 개론 과정 - OpenLayers 기초
HaNJiN Lee
 
PDF
[QGIS] 수치지도를 이용한 DEM 생성과 지형분석
MinPa Lee
 
PDF
State of OpenGXT: 오픈소스 공간분석엔진
MinPa Lee
 
PPTX
오픈소스 GIS 교육 - PostGIS
JungHwan Yun
 
PDF
[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
MinPa Lee
 
PPTX
QGIS 고급 및 PyQGIS - 김기웅, 임영현
SANGHEE SHIN
 
PDF
Documenting your REST API with Swagger - JOIN 2014
JWORKS powered by Ordina
 
PPTX
The Django Web Application Framework 2
fishwarter
 
PPTX
[공간정보연구원] 1일차 - QGIS 개요 및 기초
slhead1
 
PPTX
Big Data and Hadoop Guide
Simplilearn
 
PPTX
공간정보거점대학 - PyQGIS 및 플러그인 개발
MinPa Lee
 
QGIS 활용
Sungjin Kang
 
공간SQL을 이용한 공간자료분석 기초실습
BJ Jang
 
공간정보연구원 PostGIS 강의교재
JungHwan Yun
 
QGIS 실습 (총 7차시)
Byeong-Hyeok Yu
 
전자해도 표준과 뷰어 (최규성)
Kyu-sung Choi
 
API Design- Best Practices
Prakash Bhandari
 
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
HaNJiN Lee
 
mago3D 기술 워크샵 자료(한국어)
SANGHEE SHIN
 
Angular Dependency Injection
Nir Kaufman
 
오픈소스GIS 개론 과정 - OpenLayers 기초
HaNJiN Lee
 
[QGIS] 수치지도를 이용한 DEM 생성과 지형분석
MinPa Lee
 
State of OpenGXT: 오픈소스 공간분석엔진
MinPa Lee
 
오픈소스 GIS 교육 - PostGIS
JungHwan Yun
 
[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
MinPa Lee
 
QGIS 고급 및 PyQGIS - 김기웅, 임영현
SANGHEE SHIN
 
Documenting your REST API with Swagger - JOIN 2014
JWORKS powered by Ordina
 
The Django Web Application Framework 2
fishwarter
 
[공간정보연구원] 1일차 - QGIS 개요 및 기초
slhead1
 
Big Data and Hadoop Guide
Simplilearn
 
공간정보거점대학 - PyQGIS 및 플러그인 개발
MinPa Lee
 
Ad

Similar to Google Maps Api (20)

PPTX
Adobe MAX 2009: Making Maps with Flash
Ossama Alami
 
PDF
Hands on with the Google Maps Data API
ss318
 
KEY
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
CoLab Athens
 
PDF
Gis SAPO Hands On
codebits
 
PDF
Sapo GIS Hands-On
codebits
 
PDF
mobl
zefhemel
 
PDF
HTML5勉強会#23_GeoHex
Tadayasu Sasada
 
PDF
Gmaps Railscamp2008
xilinus
 
PPTX
How data rules the world: Telemetry in Battlefield Heroes
Electronic Arts / DICE
 
PDF
huhu
Dung Trương
 
PDF
Intro To Google Maps
Eric ShangKuan
 
KEY
Barcamp GoogleMaps - praktické ukázky kódu
Milos Lenoch
 
PDF
Maps API on_mobile_dev_festbangkok
ss318
 
PPTX
Designing and developing mobile web applications with Mockup, Sencha Touch an...
Matteo Collina
 
PPT
Find your way with SAPO Maps API
jdduarte
 
PDF
How to build a html5 websites.v1
Bitla Software
 
PDF
Cross Domain Web
Mashups with JQuery and Google App Engine
Andy McKay
 
PDF
Creating an Uber Clone - Part XVII - Transcript.pdf
ShaiAlmog1
 
PDF
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
KEY
How Quick Can We Be? Data Visualization Techniques for Engineers.
Avni Khatri
 
Adobe MAX 2009: Making Maps with Flash
Ossama Alami
 
Hands on with the Google Maps Data API
ss318
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
CoLab Athens
 
Gis SAPO Hands On
codebits
 
Sapo GIS Hands-On
codebits
 
mobl
zefhemel
 
HTML5勉強会#23_GeoHex
Tadayasu Sasada
 
Gmaps Railscamp2008
xilinus
 
How data rules the world: Telemetry in Battlefield Heroes
Electronic Arts / DICE
 
huhu
Dung Trương
 
Intro To Google Maps
Eric ShangKuan
 
Barcamp GoogleMaps - praktické ukázky kódu
Milos Lenoch
 
Maps API on_mobile_dev_festbangkok
ss318
 
Designing and developing mobile web applications with Mockup, Sencha Touch an...
Matteo Collina
 
Find your way with SAPO Maps API
jdduarte
 
How to build a html5 websites.v1
Bitla Software
 
Cross Domain Web
Mashups with JQuery and Google App Engine
Andy McKay
 
Creating an Uber Clone - Part XVII - Transcript.pdf
ShaiAlmog1
 
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
Avni Khatri
 
Ad

More from Anas Alpure (13)

PDF
WEB DEVELOPMENT DIPLOMA v1.pdf
Anas Alpure
 
PDF
أنواع المحددات Css
Anas Alpure
 
PDF
css flex box
Anas Alpure
 
PDF
css advanced
Anas Alpure
 
PDF
css postions
Anas Alpure
 
PDF
CSS layout
Anas Alpure
 
PDF
intro to CSS
Anas Alpure
 
PDF
Web Design
Anas Alpure
 
PDF
Intro to HTML Elements
Anas Alpure
 
PDF
HTML
Anas Alpure
 
PDF
البرمجيات و الانترنيت و الشبكات
Anas Alpure
 
PDF
مبادء في البرمجة
Anas Alpure
 
PDF
Design patterns
Anas Alpure
 
WEB DEVELOPMENT DIPLOMA v1.pdf
Anas Alpure
 
أنواع المحددات Css
Anas Alpure
 
css flex box
Anas Alpure
 
css advanced
Anas Alpure
 
css postions
Anas Alpure
 
CSS layout
Anas Alpure
 
intro to CSS
Anas Alpure
 
Web Design
Anas Alpure
 
Intro to HTML Elements
Anas Alpure
 
HTML
Anas Alpure
 
البرمجيات و الانترنيت و الشبكات
Anas Alpure
 
مبادء في البرمجة
Anas Alpure
 
Design patterns
Anas Alpure
 

Recently uploaded (20)

PDF
AI/ML Infra Meetup | LLM Agents and Implementation Challenges
Alluxio, Inc.
 
PPTX
WiFi Honeypot Detecscfddssdffsedfseztor.pptx
singlesrihari
 
PDF
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
hashmi66g66
 
PDF
Salesforce Agentforce AI Implementation.pdf
Robert Mark
 
PPTX
Why Generative AI is the Future of Content, Code & Creativity?
Webuters Technologies Pvt. Ltd
 
PDF
The Dynamic Duo Transforming Financial Accounting Systems Through Modern Expe...
Triforce Global
 
PPTX
"Secure File Sharing Solutions on AWS".pptx
sudharani74442
 
PDF
Website Design Services for Small Businesses.pdf
ecomme9
 
PDF
Microsoft Office 365 Crack Download Free
wasibhadar
 
PPTX
Weekly report ppt - harsh dattuprasad patel.pptx
bikerslovers123
 
PDF
Product Update: Alluxio AI 3.7 Now with Sub-Millisecond Latency
Alluxio, Inc.
 
PDF
AI/ML Infra Meetup | Beyond S3's Basics: Architecting for AI-Native Data Access
Alluxio, Inc.
 
PPTX
Tech Workshop Escape Room Tech Workshop
muthuiyad
 
PPTX
AMADEUS TRAVEL AGENT SOFTWARE | AMADEUS TICKETING SYSTEM
philipnathen82
 
PDF
CCleaner 6.39.11548 Crack 2025 License Key
viktamscs
 
PPTX
GSA Content Generator Crack (2025 Latest)
halimaanam8
 
PDF
Designing Intelligence for the Shop Floor.pdf
nikglvk
 
PDF
How AI/LLM recommend to you ? GDG meetup 16 Aug by Fariman Guliev
HusseinMalikMammadli
 
PDF
Visual explanation of Dijkstra's Algorithm using Python
Universidad Nacional de Ingenieria
 
PPTX
Cybersecurity: Protecting the Digital World
SURULIAPPANPREMKMAR
 
AI/ML Infra Meetup | LLM Agents and Implementation Challenges
Alluxio, Inc.
 
WiFi Honeypot Detecscfddssdffsedfseztor.pptx
singlesrihari
 
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
hashmi66g66
 
Salesforce Agentforce AI Implementation.pdf
Robert Mark
 
Why Generative AI is the Future of Content, Code & Creativity?
Webuters Technologies Pvt. Ltd
 
The Dynamic Duo Transforming Financial Accounting Systems Through Modern Expe...
Triforce Global
 
"Secure File Sharing Solutions on AWS".pptx
sudharani74442
 
Website Design Services for Small Businesses.pdf
ecomme9
 
Microsoft Office 365 Crack Download Free
wasibhadar
 
Weekly report ppt - harsh dattuprasad patel.pptx
bikerslovers123
 
Product Update: Alluxio AI 3.7 Now with Sub-Millisecond Latency
Alluxio, Inc.
 
AI/ML Infra Meetup | Beyond S3's Basics: Architecting for AI-Native Data Access
Alluxio, Inc.
 
Tech Workshop Escape Room Tech Workshop
muthuiyad
 
AMADEUS TRAVEL AGENT SOFTWARE | AMADEUS TICKETING SYSTEM
philipnathen82
 
CCleaner 6.39.11548 Crack 2025 License Key
viktamscs
 
GSA Content Generator Crack (2025 Latest)
halimaanam8
 
Designing Intelligence for the Shop Floor.pdf
nikglvk
 
How AI/LLM recommend to you ? GDG meetup 16 Aug by Fariman Guliev
HusseinMalikMammadli
 
Visual explanation of Dijkstra's Algorithm using Python
Universidad Nacional de Ingenieria
 
Cybersecurity: Protecting the Digital World
SURULIAPPANPREMKMAR
 

Google Maps Api

  • 1. Services( SOAP and REST) Webservice is the type of API over HTTP protocol. application programming interface (API) Web services APIs
  • 5. https://maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxx Google API https://github.com/googlemaps/google-maps-services-js https://console.developers.google.com/apis/ • Standard Plan (free) • Premium Plan (paid) https://maps.googleapis.com/maps/api/js?client=CLIENT_ID&v=3.32&.. CLIENT_ID = gme-[company] & proj-[number] ([type]) //https://github.com/udacity/ud864 Maps java script api
  • 6. Map class methods : fitBounds getBoundsfitBounds getCenterfitBounds getClickableIconsfitBounds getDivfitBounds getHeadingfitBounds getMapTypeIdfitBounds getProjectionfitBounds getStreetViewfitBounds getTiltfitBounds getZoomfitBounds panBy panTo fitBounds panToBounds setCenter setClickableIcons setHeading setMapTypeId setOptions setStreetView setTilt setZoom Marker class Methods: getAnimation getClickable getCursor getDraggable getIcon getLabel getMap getOpacity getPosition getShape getTitle getVisible getZIndex setAnimation setClickable setCursor setDraggable setIcon setLabel setMap setOpacity setOptions setPosition setShape setTitle setVisible setZIndex InfoWindow class Methods: close getContent getPosition getZIndex open setContent setOptions setPosition setZIndex
  • 7. create Map class map = new google.maps.Map(document.getElementById('map'), { center: {lat: 35.5407, lng: 35.7953}, zoom: 13, mapTypeId : google.maps.MapTypeId.SATELLITE // satellite }); map = new google.maps.Map( mapDiv [ , opts] ) //opts is MapOptions interface https://developers.google.com/maps/documentation/javascript/reference mapTypeId constants : //add widget as input field to map map.controls[google.maps.ControlPosition.RIGHT_TOP].push( document.getElementById('bar') );
  • 8. Var styles ={...} var map = new window.google.maps.Map(document.getElementById('map'), { center: {lat: 25.203041406382805, lng: 55.275247754990005}, zoom: 13, styles :styles , zoomControlOptions: { position: window.google.maps.ControlPosition.RIGHT_BOTTOM, style: window.google.maps.ZoomControlStyle.SMALL }, streetViewControlOptions: { position: window.google.maps.ControlPosition.RIGHT_CENTER }, mapTypeControl: false, });
  • 9. Lat range [-90, 90] Lng range [-180, 180] var marker = new google.maps.Marker({ position: {lat: 35.540, lng: 35.79}, title: 'i am anas alpure', animation: google.maps.Animation.DROP, id: 10 , // map: map, draggable:true, icon: image }); marker.setMap(map); var bounds = new google.maps.LatLngBounds(); bounds.extend( {lat: 35.540, lng: 35.792}); bounds.extend( {lat:35.5540, lng: 35.790}); LatLngBounds class Methods: contains equals extend getCenter getNorthEast getSouthWest intersects isEmpty toJSON toSpan toString toUrlValue A LatLngBounds instance represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian. Marker map.fitBounds(bounds);
  • 10. marker.addListener('click', function() { var infowindow = new google.maps.InfoWindow(); infowindow.marker = marker; infowindow.setContent('<div>' + View restaurant + '</div>'); infowindow.open(map, marker); // Make sure the marker property is cleared if the infowindow is closed. infowindow.addListener('closeclick', function() { infowindow.marker = null; }); }); InfoWindow The InfoWindow constructor takes an InfoWindowOptions object literal [InfoWindowOptions interface] (optional) InfoWindowOptions interface Properties: • content • disableAutoPan • maxWidth • pixelOffset • position • zIndex var infowindow = new google.maps.InfoWindow({ content : '<h1>anas alpure</h1>' , maxWidth : 400 , position : {lat:35.5540, lng: 35.790} });
  • 11. Coordinates new google.maps.LatLng(-34, 151) // {lat:-34, lng: 151} LatLng classMethods: • equals • lat • lng • toJSON • toString • toUrlValue Point class Methods: equals , toString Properties: x , y Size class Methods: equals, toString Properties: height , width map.addListener('click' ,(e)=>console.log( e.latLng.toJSON() ) )
  • 12. var defaultIcon = makeMarkerIcon('0091ff'); var highlightedIcon = makeMarkerIcon('FFFF24'); var marker = new google.maps.Marker({ // MarkerOptions interface position: position, title: title, animation: google.maps.Animation.DROP, icon: defaultIcon, id: i }); marker.addListener('mouseover', function() { this.setIcon(highlightedIcon); }); marker.addListener('mouseout', function() { this.setIcon(defaultIcon); }); function makeMarkerIcon(markerColor) { var markerImage = new google.maps.MarkerImage( 'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +'|40|_|%E2%80%A2', new google.maps.Size(21, 34), new google.maps.Point(0, 0), new google.maps.Point(10, 34), new google.maps.Size(21,34) ); return markerImage; } MarkerOptions interface : • anchorPoint • animation • clickable • crossOnDrag • cursor • draggable • icon • label • map • opacity • position • shape • title • visible
  • 13. makeMarkerIcon(markername) { var url =`/assets/${markername}`.png`; var image = { url, size: new window.google.maps.Size(40, 40), origin: new window.google.maps.Point(0, 0), anchor: new window.google.maps.Point(17, 34), scaledSize: new window.google.maps.Size(40, 40) }; return image; }
  • 15. var styles = [ { "featureType": "road.highway", "elementType": "geometry.fill", "stylers" : [ { "color": "#f74d44" }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers" : [ { "color": "#4f5fec" } ] } ] map = new google.maps.Map( Div , {styles: styles}); featureType administrative landscape points of interest road transit water Country Province Locality Neighborhood Land parcel Element type : Geometry - Fill - Stroke Labels -Text -- Text fill -- Text outline Icon
  • 16. The Maps Static API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Maps Static API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300& maptype=roadmap & markers=color:blue%7Clabel:S%7C40.702147,-74.015794& markers=color:green%7Clabel:G%7C40.711614,-74.012318 & markers=color:red%7Clabel:C%7C40.718217,-73.998284 & key=YOUR_API_KEY Maps Static API
  • 17. Embed map Return map as frame embed in html page <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJfWDUYS2sJhUR3pVBofhbMo4&key=..." allowfullscreen> </iframe>
  • 18. <script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx&libraries=geometry&v=3&callback=initMap"> </script> panorama The Street View API lets you embed a static (non-interactive) Street View panorama StreetViewPanorama class Methods: getLinks getLocation getMotionTracking getPano getPhotographerPov getPosition getPov getStatus getVisible getZoom registerPanoProvider setLinks setMotionTracking setOptions setPano setPosition setPov setVisible setZoom google.maps.StreetViewPanorama google.maps.StreetViewService getPanorama(request, callback)v3.34 Parameters: • request: StreetViewLocationRequest|StreetViewPanoRequest • callback: function(StreetViewPanoramaData, StreetViewStatus) Return Value: None
  • 19. function populateInfoWindow(marker, infowindow) { if (infowindow.marker != marker) { infowindow.setContent(''); infowindow.marker = marker; infowindow.addListener('closeclick', function() { infowindow.marker = null; }); var streetViewService = new google.maps.StreetViewService(); function getStreetView(data, status) { if (status == google.maps.StreetViewStatus.OK) { var nearStreetViewLocation = data.location.latLng; var heading = google.maps.geometry.spherical.computeHeading( nearStreetViewLocation, marker.position ); infowindow.setContent('<div>' + marker.title + '</div><div id="pano"></div>'); var panoramaOptions = { position: nearStreetViewLocation, pov: { heading: heading, pitch: 30 } }; var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), panoramaOptions); } else { infowindow.setContent('<div>' + marker.title + '</div>' + '<div>No Street View Found</div>'); } } // radius =50 meters of the markers position var radius = 50; streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView); infowindow.open(map, marker); } } var infowindow = new google.maps.InfoWindow(); marker.addListener('click', function() { populateInfoWindow(this, infowindow ); }); {lat: 35.540, lng: 35.79}
  • 20. var heading = google.maps.geometry.spherical.computeHeading(position1 , position2 ); Heading (Number) Direction of travel , specified in degrees counting clockwise relative to the true north
  • 22. // Initialize the drawing manager var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }, markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); drawingManager.addListener('polylinecomplete', function(poly) { console.log ( poly.getPath() ) }); Drawing on the map
  • 23. var map = new google.maps.Map( ... ) ; var polylineCoordinates = [ {lat: 35.52379969181, lng: 35.782901931} , {lat: 35.53057537818, lng: 35.771486450} , {lat: 35.51488532952, lng: 35.769038738} , {lat: 35.5133365776, lng: 35.784380805} , {lat: 35.52379969181, lng: 35.782901931} ]; var polyline = new google.maps.Polyline({ path: polylineCoordinates, geodesic: true, strokeColor: '#e46060', strokeOpacity: 1.0, strokeWeight: 2 }); polyline.setMap(map);
  • 24. LIBRARIES that the Google Maps APIs has Geometry ,Places , and Drawing! Geometry library : The geometry library can be loaded by specifying “libraries=geometry” when loading the JavaScript API in your site. This library does not contain any classes, but rather, contains methods within three namespaces : • spherical contains spherical geometry utilities allowing you to compute angles, distances and areas from latitudes and longitudes. • encoding contains utilities for encoding and decoding polyline paths according to the Encoded Polyline Algorithm. • poly contains utility functions for computations involving polygons and polylines. <script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx &libraries=geometry,places &v=3&callback=initMap"> </script> The google.maps.geometry library does not contain any classes; instead, the library contains static methods on the above namespaces. //hides marker outside the polygon if (google.maps.geometry.poly.containsLocation(marker.position, polygon)) { marker.setMap(map); } else { marker.setMap(null); }
  • 25. Geolocation: Displaying User or Device Position on Maps // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position)=> { var pos = { lat: position.coords.latitude, lng: position.coords.longitude } console.log( pos ); }); } else { console.log( 'Browser doesn't support Geolocation' ); }
  • 26. Geocoding web service is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map, or position the map. Geocoding https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters https://maps.googleapis.com/maps/api/geocode/json? address=1600+Amphitheatre+Parkway,+Mountain+View,+CA& key=YOUR_API_KEY https://maps.googleapis.com/maps/api/geocode/json? latlng=33.1262476,-117.3115765& key=AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY google.maps.Geocoder { "results" : [ { "address_components" : [... ], "formatted_address" : "1 Legoland Dr, Carlsbad, CA 92008, USA "geometry" : { "location" : { "lat" : 33.1262496, "lng" : -117.3119239 }, "location_type" : "ROOFTOP", "viewport" : { "northeast" : { "lat" : 33.1275985802915, "lng" : -117.3105749197085 }, "southwest" : { "lat" : 33.12490061970851, "lng" : -117.3132728802915 } } }, "place_id" : "ChIJKd0j4hxz3IARYwXlnyp1OhY", "types" : [ "street_address" ] } ], "status" : "OK" } {}{} …..
  • 27. function zoomToArea(address = ' ‫الجنوبي‬ ‫الكورنيش‬ ' ){ //Initialize the geocoder. var geocoder = new google.maps.Geocoder(); // Get the address or place that the user entered. geocoder.geocode( { address: address, componentRestrictions: { country: 'SYRIA'} } , function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.setZoom(15); } else { window.alert('We could not find that location - try entering a more' + ' specific place.'); } } ); } • address: string, • location: LatLng, • placeId: string, • bounds: LatLngBounds, • componentRestrictions: GeocoderComponentRestrictions, • region: string Geocoding
  • 28. Elevation API https://maps.googleapis.com/maps/api/elevation/outputFormat?parameters https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=YOUR_API_KEY { "results" : [ { "elevation" : 1608.637939453125, "location" : { "lat" : 39.73915360, "lng" : -104.98470340 }, "resolution" : 4.771975994110107 } ], "status" : "OK" } var elevator = new google.maps.ElevationService; elevator.getElevationForLocations( { 'locations': {"lat" : 33.96,"lng" : -117.39} }, function(results, status) { ... } )
  • 29. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 63.333, lng: -150.5}, // Denali. mapTypeId: 'terrain' }); var elevator = new google.maps.ElevationService; var infowindow = new google.maps.InfoWindow({map: map}); map.addListener('click', function(event) { displayLocationElevation(event.latLng, elevator, infowindow); }); } function displayLocationElevation(location, elevator, infowindow) { elevator.getElevationForLocations({ 'locations': [location] }, function(results, status) { infowindow.setPosition(location); if (status === 'OK') { if (results[0]) { infowindow.setContent('The elevation at this point <br>is ' + results[0].elevation + ' meters.'); } else { infowindow.setContent('No results found'); } } else { infowindow.setContent('Elevation service failed due to: ' + status); } }); } Event object
  • 30. var origin1 = new google.maps.LatLng(55.930385, -3.118425); var origin2 = 'Greenwich, England’; var origin3 = ‘4800 EL camino real ,los altos , ca’; var destinationA = ‘2465 lathem street , mountain view ,CA'; var destinationB = new google.maps.LatLng(50.087692, 14.421150); var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix( { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: 'DRIVING', transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, avoidHighways: Boolean, avoidTolls: Boolean, }, callback); function callback(response, status) { // See Parsing the Results for console.log(response) } Travel Modes : • BICYCLING • DRIVING • TRANSIT • WALKING Distance Matrix Service unitSystem : google.maps.UnitSystem.METRIC (default) google.maps.UnitSystem.IMPERIAL
  • 31. var origin = '4800 EL camino real ,los altos , ca'; var destination= '2465 lathem street , mountain view ,CA'; var distanceService = new google.maps.DistanceMatrixService(); distanceService.getDistanceMatrix( { origins: [origin], destinations: [destination], travelMode: 'BICYCLING', unitSystem : google.maps.UnitSystem.IMPERIAL } , (response, status)=>{ console.log(response) } );
  • 32. Google Maps API Directions Service which receives direction requests and returns an efficient path. Directions Service { origin: LatLng | String | google.maps.Place, destination: LatLng | String | google.maps.Place, travelMode: TravelMode, transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidFerries: Boolean, avoidHighways: Boolean, avoidTolls: Boolean, region: String } DirectionsRequest interface contains { origin: 'Hoboken NJ', destination: 'Carroll Gardens, Brooklyn', travelMode: 'TRANSIT', transitOptions: { departureTime: new Date(1337675679473), modes: ['BUS'], routingPreference: 'FEWER_TRANSFERS' }, unitSystem: google.maps.UnitSystem.IMPERIAL } transitOptions arrivalTime departureTime modes routingPreference BUS RAIL SUBWAY TRAIN TRAM google.maps.DirectionsService
  • 33. Directions Service var directionsService = new google.maps.DirectionsService(); var directionsrender = new google.maps.DirectionsRenderer(); var map = new google.maps.Map( ... ); directionsrender.setMap(map); var request = { origin: 'chicago, il' , destination: 'gallup, nm' , travelMode: 'BICYCLING' }; directionsService.route(request,function(result, status){ if (status == 'OK') { directionsrender.setDirections(result); } }); DirectionsRendererOptions interface : directions draggable infoWindow map markerOptions polylineOptions ...
  • 34. The Directions service can return multi-part directions using a series of waypoints. Waypoints alter a route by routing it through the specified location(s). var request = { origin: 'Florence, IT' , destination: 'Milan, IT' , travelMode: 'DRIVING', waypoints: [ { location: 'Genoa, IT', stopover: true },{ location: 'Bologna, IT', stopover: true },{ location: 'venice , IT', stopover: true } ], //rearranging the waypoints in a more efficient order. optimizeWaypoints:true }; directionsService.route(request,function(result, status){ if (status == 'OK') { directionsrender.setDirections(result); } }); ➢ Waypoints are not supported for the TRANSIT travel mode
  • 35. Roads API• Snap to roads • Nearest roads • Speed limits (APIs Premium Plan customers) this API is available via a simple HTTPS interface, https://roads.googleapis.com/v1/snapToRoads?parameters&key=YOUR_API_KEY https://roads.googleapis.com/v1/snapToRoads? path=-35.27801,149.12958|-35.28032,149.12907|-35.28099,149.12929|-35.28144,149.12984|-35.28194,149.13003| &key=AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY https://roads.googleapis.com/v1/nearestRoads?parameters&key=YOUR_API_KEY https://roads.googleapis.com/v1/speedLimits?parameters&key=YOUR_API_KEY
  • 36. Roads API var apiKey ='AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY'; var pathValues = ['35.27801,149.12958','-35.28032,149.12907','-35.28099,149.12929','-35.28144,149.12984','-35.28282,149.12956'] var snappedCoordinates ; var placeIdArray ; $.get('https://roads.googleapis.com/v1/snapToRoads’, { //$ jQuery library interpolate: true, key: apiKey, path: pathValues.join('|') }, processSnapToRoadResponse ); // Store snapped polyline returned by the snap-to-road service. function processSnapToRoadResponse(data) { snappedCoordinates = []; placeIdArray = []; for (var i = 0; i < data.snappedPoints.length; i++) { var latlng = new google.maps.LatLng( data.snappedPoints[i].location.latitude, data.snappedPoints[i].location.longitude ); snappedCoordinates.push(latlng); placeIdArray.push(data.snappedPoints[i].placeId); } }
  • 37. Placesgoogle.maps.places google.maps.places.Autocomplete(input, options) function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude } var circle = new google.maps.Circle({ center: geolocation, radius: 3000 }); autocomplete.setBounds(circle.getBounds()); }); } } var autocomplete = new google.maps.places.Autocomplete( document.getElementById('search-text-input') ,{ types: ['(cities)'], componentRestrictions: {country: 'fr’} , //bounds: LatLngBounds });
  • 38. var placeMarkers=[] ; function hideMarkers(m){...} function createMarkersForPlaces(p){...} var searchBox = new google.maps.places.SearchBox(document.getElementById('places-search')); // Bias the searchbox to within the bounds of the map. searchBox.setBounds(map.getBounds()); searchBox.addListener('places_changed', function() { //hide all marker in placeMarkers hideMarkers(placeMarkers); var places = searchBox.getPlaces(); // For each place, get the icon, name and location. createMarkersForPlaces(places); if (places.length == 0) { window.alert('We did not find any places matching that search!'); } });
  • 39. // It will do a nearby search using the entered query string or place. function textSearchPlaces(searchValue) { var bounds = map.getBounds(); hideMarkers(placeMarkers); var placesService = new google.maps.places.PlacesService(map); placesService.textSearch({ query: searchValue, bounds: bounds }, function(results, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { createMarkersForPlaces(results); } }); } Places Place PlacesService -> Place Searches : • nearbySearch • findPlaceFromQuery • textSearch • ..
  • 40. var request = { query: 'Museum of Contemporary Art Australia', fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'], }; placesService = new google.maps.places.PlacesService(map); placesService.findPlaceFromQuery( request , function (results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarkersForPlaces(results); } }); Places placesService.nearbySearch(request, callback); parameter TextSearch nearbySearch findPlaceFromQuery query Requered Location and radius Or bounds required locationBias optional Location and radius Or bounds optional rankBy optional optional optional keyword optional optional optional fields optional optional required
  • 41. Place Details Requests placesService = new google.maps.places.PlacesService(map); placesService.getDetails({ placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4', fields: ['name', 'rating', 'formatted_phone_number', 'geometry'] //can add photos }, function (place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { console.log(place); } });
  • 42. Time Zone API You request the time zone information for a specific latitude/longitude pair and date. The API returns the name of that time zone, the time offset from UTC, and the daylight savings offset. //$ jQuery library $.get('https://maps.googleapis.com/maps/api/timezone/json', { location : '51.5073509,-0.1277582999' , //timestamp :'1458000000' , key : 'AIzaffBpEWCjp0C0vtnpvCkouQE0hCjfKXwYoXY' }, function(data){ console.log(data) } );
  • 45. GitHub account : https://github.com/anasalpure Linked In account : https://www.linkedin.com/in/anasalpure/ Email : infomix82@gmail.com By Anas Alpure