Google Maps Api Google Services

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

14. https://mapstyle.withgoogle.com/

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 : infomix82@gmail.com
By Anas Alpure