Advanced Search

Return to Snippet

Revision: 28869
at July 15, 2010 04:50 by jonkemp
Updated Code 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Geolocation Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>

<body>

<div id="doc">

	<h1>HTML5 Geolocation Demo</h1>
	
	<div id="geo-wrapper"></div>
	<p id="msg"></p>
	<p id="lat"></p>
	<p id="long"></p>
	
</div>

<script type="text/javascript">
function supports_geolocation() {
  return !!navigator.geolocation;
}

function get_location() {
  if ( supports_geolocation() ) {
    navigator.geolocation.getCurrentPosition(show_map, handle_error);
  } else {
    // no native support;
	$("#msg").text('Your browser doesn\'t support geolocation!');
  }
}

function show_map(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	// let's show a map or do something interesting!
	
	$("#geo-wrapper").css({'width':'640px','height':'480px'});
	
	var latlng = new google.maps.LatLng(latitude, longitude);
	var myOptions = {
		zoom: 10,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("geo-wrapper"), myOptions);
	
	var marker = new google.maps.Marker({
		position: latlng,
		title:"You are here (more or less)!"
	});
  
	// To add the marker to the map, call setMap();
	marker.setMap(map);
	
	$("#msg").text('Your browser thinks you are here:');
	$("#lat").text('Latitude: ' + latitude);
	$("#long").text('Longitude: ' + longitude);
}

function handle_error(err) {
  if (err.code == 1) {
    // user said no!
	$("#msg").text('You chose not to share your location.');
  }
}

get_location();
</script>

</body>
</html>

Revision: 28868
at July 15, 2010 04:30 by jonkemp
Initial Code 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Geolocation Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="modernizr-1.5.min.js"></script>
</head>

<body>

<div id="doc">

	<h1>HTML5 Geolocation Demo</h1>
	
	<div id="geo-wrapper"></div>
	<p id="msg"></p>
	<p id="lat"></p>
	<p id="long"></p>
	
</div>

<script type="text/javascript">
function get_location() {
  if (Modernizr.geolocation) {
    navigator.geolocation.getCurrentPosition(show_map, handle_error);
  } else {
    // no native support;
	$("#msg").text('Your browser doesn\'t support geolocation!');
  }
}

function show_map(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	// let's show a map or do something interesting!
	
	$("#geo-wrapper").css({'width':'640px','height':'480px'});
	
	var latlng = new google.maps.LatLng(latitude, longitude);
	var myOptions = {
		zoom: 10,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("geo-wrapper"), myOptions);
	
	var marker = new google.maps.Marker({
		position: latlng,
		title:"You are here (more or less)!"
	});
  
	// To add the marker to the map, call setMap();
	marker.setMap(map);
	
	$("#msg").text('Your browser thinks you are here:');
	$("#lat").text('Latitude: ' + latitude);
	$("#long").text('Longitude: ' + longitude);
}

function handle_error(err) {
  if (err.code == 1) {
    // user said no!
	$("#msg").text('You chose not to share your location.');
  }
}

get_location();
</script>

</body>
</html>
Initial URL 
http://diveintohtml5.org/geolocation.html
Initial Description 
HTML5 geolocation using the new HTML5 geolocation API, JavaScript and Google Maps. HTML5 geolocation detection is included. This will work in almost every modern browser except IE, but if your browser does not support it, it will tell you so. It will also provide a message to the user if they decline to share their location with the browser. This example uses jQuery.
Initial Title 
HTML5 Geolocation with Google Maps
Initial Tags 
javascript, html5
Initial Language 
JavaScript