Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 19c3118

Browse files
Merge pull request #40 from AzharAli-github/main
geolocation
2 parents 198d02a + 9ca74fb commit 19c3118

File tree

3 files changed

+114
-0
lines changed

3 files changed

+114
-0
lines changed
4.15 KB
Loading[フレーム]
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Geolocation API</title>
9+
<link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
10+
</head>
11+
12+
<body>
13+
<h1>Geolocation API</h1>
14+
<!-- Example One -->
15+
<h2>Example One</h2>
16+
<button onclick="getLocationOne()">display location</button>
17+
<p id="textOne"></p>
18+
<!-- Example Two -->
19+
<h2>Example Two</h2>
20+
<button onclick="getLocationTwo()">display location</button>
21+
<p id="textTwo"></p>
22+
<!-- Example Three -->
23+
<h2>Example Three</h2>
24+
<button onclick="getLocationThree()">display location</button>
25+
<p id="textThree"></p>
26+
<!-- Example Four -->
27+
<h2>Example Four</h2>
28+
<button onclick="showPositionFour()">display location</button>
29+
<div id="mapholder"></div>
30+
<script src="script.js"></script>
31+
</body>
32+
33+
</html>
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// Geolocation API
2+
3+
// Example One
4+
5+
const textOne = document.getElementById("textOne");
6+
7+
function getLocationOne() {
8+
if (navigator.geolocation) {
9+
navigator.geolocation.getCurrentPosition(showPositionOne);
10+
} else {
11+
textOne.innerHTML = "Geolocation is not supported by this browser.";
12+
}
13+
}
14+
15+
function showPositionOne(position) {
16+
textOne.innerHTML = "Latitude: " + position.coords.latitude +
17+
"<br>Longitude: " + position.coords.longitude;
18+
}
19+
20+
21+
// Example Two
22+
23+
const textTwo = document.getElementById("textTwo");
24+
25+
function getLocationTwo() {
26+
if (navigator.geolocation) {
27+
navigator.geolocation.getCurrentPosition(showPositionTwo, showError);
28+
} else {
29+
textTwo.innerHTML = "Geolocation is not supported by this browser.";
30+
}
31+
}
32+
33+
function showPositionTwo(position) {
34+
textTwo.innerHTML = "Latitude: " + position.coords.latitude +
35+
"<br>Longitude: " + position.coords.longitude;
36+
}
37+
38+
function showError(error) {
39+
switch (error.code) {
40+
case error.PERMISSION_DENIED:
41+
textTwo.innerHTML = "User denied the request for Geolocation."
42+
break;
43+
case error.POSITION_UNAVAILABLE:
44+
textTwo.innerHTML = "Location information is unavailable."
45+
break;
46+
case error.TIMEOUT:
47+
textTwo.innerHTML = "The request to get user location timed out."
48+
break;
49+
case error.UNKNOWN_ERROR:
50+
textTwo.innerHTML = "An unknown error occurred."
51+
break;
52+
}
53+
}
54+
55+
// Example Three
56+
const textThree = document.getElementById("textThree");
57+
58+
function getLocationThree() {
59+
if (navigator.geolocation) {
60+
navigator.geolocation.watchPosition(showPositionThree);
61+
} else {
62+
textThree.innerHTML = "Geolocation is not supported by this browser.";
63+
}
64+
}
65+
66+
function showPositionThree(position) {
67+
textThree.innerHTML = "Latitude: " + position.coords.latitude +
68+
69+
"<br>Longitude: " + position.coords.longitude;
70+
}
71+
72+
// Show Position Example Four
73+
let mapholder = document.getElementById("mapholder")
74+
75+
function showPositionFour(position) {
76+
let latlon = position.coords.latitude + "," + position.coords.longitude;
77+
78+
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
79+
80+
mapholder.innerHTML = "<img src='" + img_url + "'>";
81+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /