Scribd
Upload
18 views2 pages

How To Use HTML5 GeoLocation API With Google Maps

The document explains how to use the HTML5 Geolocation API with Google Maps to share location data. It details the process of obtaining a Google Maps API key and provides a sample code to display the user's current location on a map. The code includes functions to handle location retrieval and error management.

Uploaded by

Abdul Basir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views2 pages

How To Use HTML5 GeoLocation API With Google Maps

The document explains how to use the HTML5 Geolocation API with Google Maps to share location data. It details the process of obtaining a Google Maps API key and provides a sample code to display the user's current location on a map. The code includes functions to handle location retrieval and error management.

Uploaded by

Abdul Basir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Page 1 of 2

How to use HTML5 GeoLocation API with Google Maps?


HTML Web Development Front End Technology

HTML5 Geolocation API lets you share your location with your favorite websites. A Javascript can
capture your latitude and longitude and can be sent to backend web server and do fancy location-
aware things like finding local businesses or showing your location on a map. The geolocation
coordinates specify the geographic location of the device.

We will be using getCurrentPostion() method to get the current location. To get current location using
HTML5 Geolocation with Google Maps, you need to set an API key for Google Static Maps API.

Go to https://console.developers.google.com and get a free API key for Google Map. Add this key to
the code to work Geolocation with it.

You can try to run the following code to show current location using HTML5 Geolocation with Google
Maps −

Example

<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
Page 2 of 2

function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlongvalue = position.coords.latitude + ","
+ position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap
+latlongvalue+"&zoom=14&size = 400x300&key =
AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
document.getElementById("mapholder").innerHTML =
"<img src ='"+img_url+"'>";
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition
(showLocation, errorHandler, options);
}else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<div id="mapholder"></div>
<form>
<input type="button" onclick="getLocation();" value="Your Locati
</form>
</body>
</html>

You might also like