Skip to content

Instantly share code, notes, and snippets.

@itskawsar
Last active December 26, 2015 01:19
Show Gist options
  • Save itskawsar/7070141 to your computer and use it in GitHub Desktop.
Save itskawsar/7070141 to your computer and use it in GitHub Desktop.
HTML 5 - Pointing current position in google map using GeoLocation API
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body style="font: 75% Lucida Grande, Trebuchet MS;margin:0">
<div id="content" style="height: 450px"></div>
<script>
var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var map;
var infowindow = new google.maps.InfoWindow();
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, onError);
// also monitor position as it changes
navigator.geolocation.watchPosition(showPosition);
} else {
onError();
}
function showPosition(position) {
map = new google.maps.Map(document.getElementById("content"), mapOptions);
var lat = position.coords.latitude;
var lng = position.coords.longitude;
initialLocation = new google.maps.LatLng(lat, lng);
map.setCenter(initialLocation);
infowindow.setContent(lat + " " + lng);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}
function onError() {
if (navigator.geolocation) {
initialLocation = newyork;
contentString = "Error: The Geolocation service failed.";
} else {
initialLocation = siberia;
contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
}
mapOptions.zoom = 4;
map = new google.maps.Map(document.getElementById("content"), mapOptions);
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}
</script>
</body>
</html>​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment