Google Maps Api
3 likes•648 views
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.
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-5-320.jpg)
![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') );](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-7-320.jpg)
![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);](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-9-320.jpg)
![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}
});](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-10-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-15-320.jpg)
![// 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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-22-320.jpg)
![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);](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-23-320.jpg)
![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"
} {}{} …..](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-26-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-27-320.jpg)
![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) { ... }
)](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-28-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-29-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-30-320.jpg)
![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)
}
);](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-31-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-32-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-34-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-36-320.jpg)
![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
});](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-37-320.jpg)
![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!');
}
});](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-38-320.jpg)
![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](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-40-320.jpg)
![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);
}
});](https://image.slidesharecdn.com/apis-180910101103/85/Google-Maps-Api-41-320.jpg)
Google Maps Api
- 1. Services( SOAP and REST) Webservice is the type of API over HTTP protocol. application programming interface (API) Web services APIs
- 4. addListener bindTo get notify set setValues unbind unbindAll MVCObject class google.maps.MVCObject
- 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
- 21. Drawing on the map
- 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 : [email protected] By Anas Alpure