Posted By

chrisaiv on 03/24/11

Tagged

jquery
html5

Versions (?)

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

Statistics

Viewed 827 times

Favorited by 3 user(s)

Related snippets

HTML5: Create a Dynamic Google Map Site w/ Marker for iPhone

/ Published in: HTML

This simple example will access your GeoLocation on mobile Safari and place a marker using Google Maps.

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" />
	
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
	<meta name="apple-mobile-web-app-capable" content="yes">
	
	<link rel="apple-touch-icon" href="images/iphone/57x57.png" />
	
	<link rel="apple-touch-startup-image" href="images/iphone/splashscreen.png" />
	
	<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>
	<style type="text/css" media="screen">
		/* Target ipad Devices in Portrait Orientation */
		@media screen and (device-width: 768px) and (orientation:portrait){

}
		@media screen and (device-width: 768px) and (orientation:landscape){

}		
	</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 showLocation( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var latlng = new google.maps.LatLng( lat, lng );
				
 				var map = createDynamicMap( latlng );
				var marker1 = createMarker( latlng, map );	
			}

function mapError( e ){
				var error;
				switch( e.code ){
					case 1: 
						error = "Permission Denied.\n\n Please turn on Geo Location by going to Settings > Location Services > Safari";
					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