Posted By

chrisaiv on 03/24/11

Tagged

jquery
html5

Versions (?)

Last Edited at 03/24/11 05:08pm

Statistics

Viewed 2136 times

Favorited by 4 user(s)

Related snippets

HTML5: Creating a Static Google Map

/ Published in: HTML

This mini experiment simply shows how to create a static Google Map with a Marker based on a user's Geo Location. This was designed specifically for Safari Mobile

Highlighted TextExpand

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
	<title>Geo Location</title>
	
	<style type="text/css" media="screen">
		html{ height: 100%; }
		body{ height: 100%; margin: 0; padding: 0; }
		#map{ width: 100%; height: 100%; }
	</style>
	
		
		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
		
		
		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

function mapError( e ){
				var error;
				switch( e.code ){
					case 1: 
						error = "Permission Denied";
					break;
					case 2: 
						error = "Network or Satellites Down";
					break;
					case 3: 
						error = "GeoLocation timed out";
					break;
					case 0: 
						error = "Other Error";
					break;
				}
				$("#map").html( error );
			}
			
			
		});
		</script>
	
	</head>
	<body>
		<div id="map">
			
		</div>
	</body>
</html>

Report this snippet Tweet