Google Maps Api

Services( SOAP and REST)
Webservice is the type of API over HTTP protocol.
application programming interface (API)
Web
services
APIs

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() ) )

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>

var heading = google.maps.geometry.spherical.computeHeading(position1 , position2 );
Heading (Number) Direction of travel , specified in degrees counting clockwise relative to the true north

// 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

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"
} {}{} …..

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) { ... }
)

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
});

// 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
• ..

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)
}
);

GitHub account : https://github.com/anasalpure
Linked In account : https://www.linkedin.com/in/anasalpure/
Email : infomix82@gmail.com
By Anas Alpure

Google Maps Api

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Google Maps Api

Similar to Google Maps Api (20)

More from Anas Alpure

More from Anas Alpure (13)

Recently uploaded

Recently uploaded (20)

Google Maps Api