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

Revision: 43472

at March 24, 2011 17:54 by chrisaiv

Updated Code

<!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" />
	<!-- Override Default Apple Grey Bar with Black Bar -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!-- Make the Web app Look more Native -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- iPhone icon -->
	<link rel="apple-touch-icon" href="images/iphone/57x57.png" />
	<!-- iPhone Splash Screen -->
	<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>
	
		<!-- jQuery Min -->
		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
		
		<!-- Google Maps -->
		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

		<script charset="utf-8" type="text/javascript">
		mapWidth = screen.width;
		mapHeight = screen.height;
				
		$(document).ready(function(){
			//Orientation
			var supportsOrientationChange = "onorientationchange" in window, 
				orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
				
			$(window).bind( orientationEvent, onOrientationChange );
			function onOrientationChange(){
				switch( window.orientation ){
					//Portrait: normal
					case 0:
						break;
					//Landscape: clockwise
					case -90:
						break
					//Landscape: counterclockwise
					case "180":
						break;
					//Portrait: upsidedown
					case "90":
						break;
				}
			}
			
			//GeoLocation
			var geo = navigator.geolocation;
			if( geo ){
				geo.getCurrentPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
			}
			
			function createMarker( latlng, map ){
 				return new google.maps.Marker( { position: latlng, map: map } );
			}
			
			function createDynamicMap( latlng ){
				var div = $("#map")[0];
				var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
				return new google.maps.Map( div, options );
			}

			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>

Revision: 43471

at March 24, 2011 17:31 by chrisaiv

Updated Code

<!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" />
	<!-- Override Default Apple Grey Bar with Black Bar -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!-- Make the Web app Look more Native -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- iPhone icon -->
	<link rel="apple-touch-icon" href="images/iphone/57x57.png" />
	<!-- iPhone Splash Screen -->
	<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>
	
		<!-- jQuery Min -->
		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
		
		<!-- Google Maps -->
		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

		<script charset="utf-8" type="text/javascript">
		mapWidth = screen.width;
		mapHeight = screen.height;
				
		$(document).ready(function(){
			var geo = navigator.geolocation;
			if( geo ){
				geo.getCurrentPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
			}
			
			function createMarker( latlng, map ){
 				return new google.maps.Marker( { position: latlng, map: map } );
			}
			
			function createDynamicMap( latlng ){
				var div = $("#map")[0];
				var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
				return new google.maps.Map( div, options );
			}

			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>

Revision: 43470

at March 24, 2011 17:12 by chrisaiv

Initial Code

<!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>
	
		<!-- jQuery Min -->
		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
		
		<!-- Google Maps -->
		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>

		<script charset="utf-8" type="text/javascript">
		mapWidth = screen.width;
		mapHeight = screen.height;
				
		$(document).ready(function(){
			var geo = navigator.geolocation;
			if( geo ){
				geo.getCurrentPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
			}
			
			function createMarker( latlng, map ){
 				return new google.maps.Marker( { position: latlng, map: map } );
			}
			
			function createDynamicMap( latlng ){
				var div = $("#map")[0];
				var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
				return new google.maps.Map( div, options );
			}

			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";
					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>

Initial URL

Initial Description

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

Initial Title

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

Initial Tags

jquery, html5

Initial Language

HTML

Choose a language for easy browsing: