Geolocation Api

Developer
André Michelle
Size
2,322 Kb
Views
26,312
  1. Geolocation Api Previews
  2. Geolocation Api HTML Codes
  3. Geolocation Api CSS Codes
  4. Geolocation Api JS Codes

How do I make an geolocation api?

Http://www.w3schools.com/html/html5_geolocation.asp. What is a geolocation api? How do you make a geolocation api? This script and codes were developed by André Michelle on 18 October 2022, Tuesday.

Geolocation Api Previews
IQ Test

Geolocation Api - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Geolocation Api</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div geolocation>	<h1>Geolocation Api</h1>	<div map>	<span>Click to get your geolocation</span>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Geolocation Api - Script Codes CSS Codes

html,
body {	margin: 0;	font-size: 13px;	font-family: Open Sans;
}
div[geolocation] {	top: 50%;	left: 50%;	transform: translateX(-50%) translateY(-50%);	position: absolute;
}
div[geolocation] h1 {	font-size: 16px;	margin: 0 0 4px 4px;
}
div[geolocation] div[map] {	min-width: 400px;	min-height: 300px;	border-radius: 4px;	background-color: #CCC;
}
div[geolocation] div[map] span {	top: 50%;	left: 50%;	transform: translateX(-50%) translateY(-50%);	position: absolute;	color: #FFF;	font-weight: bold;	cursor: pointer;	white-space: nowrap;
}

Geolocation Api - Script Codes JS Codes

var container = document.querySelector("div[geolocation] div[map]");
var showPosition = function(position) {	container.innerHTML =	"<img src='https://maps.googleapis.com/maps/api/staticmap?center=" +	position.coords.latitude +	"," +	position.coords.longitude +	"&zoom=14&size=400x300&sensor=false'>";
};
var showError = function(error) {	var span = container.querySelector("span");	switch (error.code) {	case undefined:	span.innerHTML = error;	return;	case error.PERMISSION_DENIED:	span.innerHTML = "User denied the request for Geolocation.";	return;	case error.POSITION_UNAVAILABLE:	span.innerHTML = "Location information is unavailable.";	return;	case error.TIMEOUT:	span.innerHTML = "The request to get user location timed out.";	return;	case error.UNKNOWN_ERROR:	span.innerHTML = "An unknown error occurred.";	return;	}
}
document.querySelector("div[geolocation] div[map] span").onclick = function() {	this.textContent = "Waiting ...";	navigator.geolocation.getCurrentPosition(showPosition, showError);
};
Geolocation Api - Script Codes
Geolocation Api - Script Codes
Home Page Home
Developer André Michelle
Username andremichelle
Uploaded October 18, 2022
Rating 3
Size 2,322 Kb
Views 26,312
Do you need developer help for Geolocation Api?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

André Michelle (andremichelle) Script Codes
Name
Code 7
Time Displacement
Happy PI Day
Animated text on bezier curve
Instable Connection
X0X Clap
Loop Mixing
Calculating Pi with Virtual Darts
Web Audio Api HardLimiter
Stern-Brocot Sequence
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!