GeoLocation using Google Maps JavaScript API v3
-
Upload
s-m-mohi-us-sunnat -
Category
Education
-
view
537 -
download
2
Transcript of GeoLocation using Google Maps JavaScript API v3
![Page 1: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/1.jpg)
![Page 2: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/2.jpg)
GeoLocation using Google Maps
JavaScript API v3
![Page 3: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/3.jpg)
Steps
![Page 4: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/4.jpg)
Manifest Permission
![Page 5: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/5.jpg)
Challenges and Limitation
•Some API is not work in Emulator•Internet connection must need•Complex Coding•Some APIs is not suitable for most of the countries like Bangladesh.
![Page 6: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/6.jpg)
Solutions•Use Real Devices•Keep connect internet in your testing device
•Need a good knowledge of JS•Use the other APIs which are very popular
![Page 7: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/7.jpg)
Google Maps JavaScript API v3
![Page 8: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/8.jpg)
Amuture•Obtaining an API Key•Declaring Your Application as HTML5•Loading the Google Maps API•Map DOM (Document Object Model) Elements•Map Options•The Map Object•Loading the Map
![Page 9: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/9.jpg)
Obtaining an API Key
![Page 10: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/10.jpg)
Sample Code
![Page 11: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/11.jpg)
Map DOM Elements
This This div will show the map.will show the map.
![Page 12: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/12.jpg)
Loading the Google Maps API
This This script’s src is the is the Google Map APIGoogle Map API
![Page 13: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/13.jpg)
Libraries Call
This This script willwill initialize the map the map
![Page 14: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/14.jpg)
Loading the Map
This will load the This will load the mapmap
![Page 15: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/15.jpg)
Intermediate
![Page 16: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/16.jpg)
Simple Marker
![Page 17: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/17.jpg)
Custom Icon
![Page 18: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/18.jpg)
Dragging
![Page 19: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/19.jpg)
Polylines
![Page 20: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/20.jpg)
Polygon
![Page 21: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/21.jpg)
Open an info window
![Page 22: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/22.jpg)
Open an info window manual Width
![Page 23: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/23.jpg)
Advance
![Page 24: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/24.jpg)
My GeoLocation
GPS is must for this option.
![Page 25: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/25.jpg)
Nearby Search Requests
![Page 26: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/26.jpg)
Radar Search Requests
![Page 27: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/27.jpg)
Directions API and Distance API
![Page 28: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/28.jpg)
Status Codes
• ERROR: There was a problem contacting the Google servers.
• INVALID_REQUEST: This request was invalid.
• OK: The response contains a valid result.• OVER_QUERY_LIMIT: The webpage has
gone over its request quota.• NOT_FOUND The referenced location was
not found in the Places database.• REQUEST_DENIED: The webpage is not
allowed to use the PlacesService.• UNKNOWN_ERROR: The PlacesService
request could not be processed due to a server error. The request may succeed if you try again.
• ZERO_RESULTS: No result was found for this request.
Search Responses
Place Details Responses
• ERROR: There was a problem contacting the Google servers.
• INVALID_REQUEST: This request was invalid.
• OK: The response contains a valid result.• OVER_QUERY_LIMIT: The webpage has
gone over its request quota.• REQUEST_DENIED: The webpage is not
allowed to use the PlacesService.• UNKNOWN_ERROR: The PlacesService
request could not be processed due to a server error. The request may succeed if you try again.
• ZERO_RESULTS: No result was found for this request.
![Page 29: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/29.jpg)
References•https://console.developers.google.com/•https://developers.google.com/maps/documentation/javascript/
•https://developer.mozilla.org/en-US/docs/Web/API/Geolocation
![Page 30: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/30.jpg)
Any Questions ???
![Page 31: GeoLocation using Google Maps JavaScript API v3](https://reader035.fdocuments.us/reader035/viewer/2022062218/58ea4a811a28abc4698b5c87/html5/thumbnails/31.jpg)