Html 5 geolocation api
ehtishamsiddiqui
335 views
12 slides
May 28, 2018
Slide 1 of 12
1
2
3
4
5
6
7
8
9
10
11
12
About This Presentation
HTML 5 Next Generation Websites by Muhammad Ehtisham Siddiqui (Follow me to complete course)
Slide Content
HTML 5 Geolocation API Muhammad Ehtisham Siddiqui Aptech Computer Education
What is Geolocation The HTML Geolocation API is used to locate a user's position . he HTML Geolocation API is used to get the geographical position of a user . Geolocation is most accurate for devices with GPS, like iPhone.
Browsers Support API Chrome Internet Explorer Firefox Safari Opera Geolocation 5.0 - 49.0 (http) 50.0 (https) 9.0 3.5 5.0 16.0
How to use API Check if Geolocation is supported If supported, run the getCurrentPosition () method. If not, display a message to the user If the getCurrentPosition () method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition ) The showPosition () function outputs the Latitude and Longitude if ( navigator.geolocation ) if ( navigator.geolocation ) { navigator.geolocation.getCurrentPosition ( showPosition ); } function showPosition (position) { x.innerHTML = "Latitude: " + position.coords.latitude + "< br >Longitude: " + position.coords.longitude ; }
Steps
Example Code
Finding Longitude & Latitude <!DOCTYPE html >< html >< body > <p>Click the button to get your coordinates.</p > < button onclick =" getLocation ()">Try It</button >< p id="demo"></p ><script> var x = document.getElementById ("demo "); function getLocation () { if ( navigator.geolocation ) { navigator.geolocation.getCurrentPosition ( showPosition );} else { x.innerHTML = "Geolocation is not supported by this browser .";}} function showPosition (position) { x.innerHTML = "Latitude: " + position.coords.latitude + "< br >Longitude: " + position.coords.longitude ;} </script ></ body > </ html>
Displaying the result in MAP <!DOCTYPE html >< html >< body><p id="demo">Click the button to get your position.</p><button onclick =" getLocation ()">Try It</button><div id=" mapholder "></div>< script> var x = document.getElementById ("demo "); function getLocation () { if ( navigator.geolocation ) { navigator.geolocation.getCurrentPosition ( showPosition , showError );} else { x.innerHTML = "Geolocation is not supported by this browser ."; }}function showPosition (position) { var latlon = position.coords.latitude + "," + position.coords.longitude ; var img_url = "https://maps.googleapis.com/maps/ api / staticmap?center =" + latlon +"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU "; document.getElementById (" mapholder "). innerHTML = "< img src ='"+ img_url +"'>";} }</ script></body></html>
OutPut
Video
Video
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 335
- Slides 12
- Favorites 1
- Age 2745 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views