This article provides a simple HTML example which automatically detects the current location of the user based on the latitude/longitude then display a marker on the Google Map that is tied to latitude/longitude coordinates.
In order to get the user current location, we will use the Geolocation API which can return the latitude and longitude of the current user based on GPS or IP Address.
After that, we will need to add a marker(overlay) that is tied to the latitude/longitude coordinate on Google Map by using Google Map API.
Display User Current Location On Google Map
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
alert("Geo Location is not supported on your current browser!");
}
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"lat: " + lat + " long: " + long
});
marker.setMap(map);
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html> |
Note: you will need to allow to share your current location when be asked.
