In this article, I will show you how to find current location using google maps api geolocation. The Html5 geolocation api supports for HTML5, is used to determine the get latitude and longitude from google maps, using these coordinates you can display user’s current location on google maps.
To get started working with google maps location API click the link which will guide you the process of activating it.
Create an html page and create a div element and name id as “divmap” and load the maps using JavaScript API and display location on google map.
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR-KEY" type="text/javascript"></script>
The URL contained in the script tag of the source will load all the symbols and definition of the goolge maps API. You just pass the parameter API key to the URL.
HTML Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyBRdtF6wK0hiNKlvpe92fT67mNg2Z9Ae5M"></script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("divMap"),mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style ='height:60px;width:200px'><b>Your location:</b><br/>Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map,marker);
});
});
} else {
alert('GeoLocation feature is not supported in this browser.');
}
</script>
</head>
<body>
<div id="divMap" style="width: 500px; height: 500px">
</div>
</body>
</html>
Output:
Post your comments / questions
Recent Article
- How to fix HAXM is not installed |in Android Studio
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
- This action cannot be completed because the file is open in SQL Server(SQLEXPRESS) - FIXED
- Unicode error 'unicodeescape' codec can't decode bytes in position 2-3: truncated UXXXXXXXX escape
- Could not find the 'angular-devkit/build-angular:dev-server' builder's node package | Angular Error
Related Article