From 9ca74fb11af5373f0a87318f31d53b483dd8e8e7 Mon Sep 17 00:00:00 2001
From: Azhar Ali <azharborithic11@gmail.com>
Date: Sat, 21 Jan 2023 11:56:27 +0500
Subject: [PATCH] geolocation

---
 .../web-geolocation API/Images/js-logo.png    | Bin 0 -> 4253 bytes
 .../Web API/web-geolocation API/index.html    |  33 +++++++
 .../Web API/web-geolocation API/script.js     |  81 ++++++++++++++++++
 3 files changed, 114 insertions(+)
 create mode 100644 JavaScript/Advance/Web API/web-geolocation API/Images/js-logo.png
 create mode 100644 JavaScript/Advance/Web API/web-geolocation API/index.html
 create mode 100644 JavaScript/Advance/Web API/web-geolocation API/script.js

diff --git a/JavaScript/Advance/Web API/web-geolocation API/Images/js-logo.png b/JavaScript/Advance/Web API/web-geolocation API/Images/js-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..4637ac92a54e728830ce5e72ff0fb6b017ba1797
GIT binary patch
literal 4253
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
O0OjuLb*RDxO#KHrCLiqp

literal 0
HcmV?d00001

diff --git a/JavaScript/Advance/Web API/web-geolocation API/index.html b/JavaScript/Advance/Web API/web-geolocation API/index.html
new file mode 100644
index 0000000..89c1845
--- /dev/null
+++ b/JavaScript/Advance/Web API/web-geolocation API/index.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Geolocation API</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <h1>Geolocation API</h1>
+    <!-- Example One -->
+    <h2>Example One</h2>
+    <button onclick="getLocationOne()">display location</button>
+    <p id="textOne"></p>
+    <!-- Example Two -->
+    <h2>Example Two</h2>
+    <button onclick="getLocationTwo()">display location</button>
+    <p id="textTwo"></p>
+    <!-- Example Three -->
+    <h2>Example Three</h2>
+    <button onclick="getLocationThree()">display location</button>
+    <p id="textThree"></p>
+    <!-- Example Four -->
+    <h2>Example Four</h2>
+    <button onclick="showPositionFour()">display location</button>
+    <div id="mapholder"></div>
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/JavaScript/Advance/Web API/web-geolocation API/script.js b/JavaScript/Advance/Web API/web-geolocation API/script.js
new file mode 100644
index 0000000..d44b697
--- /dev/null
+++ b/JavaScript/Advance/Web API/web-geolocation API/script.js	
@@ -0,0 +1,81 @@
+// Geolocation API
+
+// Example One
+
+const textOne = document.getElementById("textOne");
+
+function getLocationOne() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(showPositionOne);
+    } else {
+        textOne.innerHTML = "Geolocation is not supported by this browser.";
+    }
+}
+
+function showPositionOne(position) {
+    textOne.innerHTML = "Latitude: " + position.coords.latitude +
+        "<br>Longitude: " + position.coords.longitude;
+}
+
+
+//   Example Two
+
+const textTwo = document.getElementById("textTwo");
+
+function getLocationTwo() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(showPositionTwo, showError);
+    } else {
+        textTwo.innerHTML = "Geolocation is not supported by this browser.";
+    }
+}
+
+function showPositionTwo(position) {
+    textTwo.innerHTML = "Latitude: " + position.coords.latitude +
+        "<br>Longitude: " + position.coords.longitude;
+}
+
+function showError(error) {
+    switch (error.code) {
+        case error.PERMISSION_DENIED:
+            textTwo.innerHTML = "User denied the request for Geolocation."
+            break;
+        case error.POSITION_UNAVAILABLE:
+            textTwo.innerHTML = "Location information is unavailable."
+            break;
+        case error.TIMEOUT:
+            textTwo.innerHTML = "The request to get user location timed out."
+            break;
+        case error.UNKNOWN_ERROR:
+            textTwo.innerHTML = "An unknown error occurred."
+            break;
+    }
+}
+
+//    Example Three
+const textThree = document.getElementById("textThree");
+
+function getLocationThree() {
+    if (navigator.geolocation) {
+        navigator.geolocation.watchPosition(showPositionThree);
+    } else {
+        textThree.innerHTML = "Geolocation is not supported by this browser.";
+    }
+}
+
+function showPositionThree(position) {
+    textThree.innerHTML = "Latitude: " + position.coords.latitude +
+
+        "<br>Longitude: " + position.coords.longitude;
+}
+
+//    Show Position Example Four
+let mapholder = document.getElementById("mapholder")
+
+function showPositionFour(position) {
+    let latlon = position.coords.latitude + "," + position.coords.longitude;
+
+    let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
+
+    mapholder.innerHTML = "<img src='" + img_url + "'>";
+}
\ No newline at end of file