Advanced Search

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

/ Published in: HTML
Save to your folder(s)
This simple example will access your GeoLocation on mobile Safari and place a marker using Google Maps.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. 	<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
  6. 	<!-- Override Default Apple Grey Bar with Black Bar -->
  7. 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. 	<!-- Make the Web app Look more Native -->
  9. 	<meta name="apple-mobile-web-app-capable" content="yes">
  10. 	<!-- iPhone icon -->
  11. 	<link rel="apple-touch-icon" href="images/iphone/57x57.png" />
  12. 	<!-- iPhone Splash Screen -->
  13. 	<link rel="apple-touch-startup-image" href="images/iphone/splashscreen.png" />
  14.  
  15. 	<title>Geo Location</title>
  16.  
  17. 	<style type="text/css" media="screen">
  18. 		html{ height: 100%; }
  19. 		body{ height: 100%; margin: 0; padding: 0; }
  20. 		#map{ width: 100%; height: 100%; }
  21. 	</style>
  22. 	<style type="text/css" media="screen">
  23. 		/* Target ipad Devices in Portrait Orientation */
  24. 		@media screen and (device-width: 768px) and (orientation:portrait){
  25.  
  26. 		}
  27. 		@media screen and (device-width: 768px) and (orientation:landscape){
  28.  
  29. 		}		
  30. 	</style>
  31.  
  32. 		<!-- jQuery Min -->
  33. 		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  34.  
  35. 		<!-- Google Maps -->
  36. 		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  37.  
  38. 		<script charset="utf-8" type="text/javascript">
  39. 		mapWidth = screen.width;
  40. 		mapHeight = screen.height;
  41.  
  42. 		$(document).ready(function(){
  43. 			//Orientation
  44. 			var supportsOrientationChange = "onorientationchange" in window, 
  45. 				orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
  46.  
  47. 			$(window).bind( orientationEvent, onOrientationChange );
  48. 			function onOrientationChange(){
  49. 				switch( window.orientation ){
  50. 					//Portrait: normal
  51. 					case 0:
  52. 						break;
  53. 					//Landscape: clockwise
  54. 					case -90:
  55. 						break
  56. 					//Landscape: counterclockwise
  57. 					case "180":
  58. 						break;
  59. 					//Portrait: upsidedown
  60. 					case "90":
  61. 						break;
  62. 				}
  63. 			}
  64.  
  65. 			//GeoLocation
  66. 			var geo = navigator.geolocation;
  67. 			if( geo ){
  68. 				geo.getCurrentPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
  69. 			}
  70.  
  71. 			function createMarker( latlng, map ){
  72.  				return new google.maps.Marker( { position: latlng, map: map } );
  73. 			}
  74.  
  75. 			function createDynamicMap( latlng ){
  76. 				var div = $("#map")[0];
  77. 				var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
  78. 				return new google.maps.Map( div, options );
  79. 			}
  80.  
  81. 			function showLocation( position ){
  82. 				var lat = position.coords.latitude;
  83. 				var lng = position.coords.longitude;
  84. 				var latlng = new google.maps.LatLng( lat, lng );
  85.  
  86.  				var map = createDynamicMap( latlng );
  87. 				var marker1 = createMarker( latlng, map );	
  88. 			}
  89.  
  90. 			function mapError( e ){
  91. 				var error;
  92. 				switch( e.code ){
  93. 					case 1: 
  94. 						error = "Permission Denied.\n\n Please turn on Geo Location by going to Settings > Location Services > Safari";
  95. 					break;
  96. 					case 2: 
  97. 						error = "Network or Satellites Down";
  98. 					break;
  99. 					case 3: 
  100. 						error = "GeoLocation timed out";
  101. 					break;
  102. 					case 0: 
  103. 						error = "Other Error";
  104. 					break;
  105. 				}
  106. 				$("#map").html( error );
  107. 			}
  108. 		});
  109. 		</script>
  110.  
  111. 	</head>
  112. 	<body>
  113. 		<div id="map">
  114.  
  115. 		</div>
  116. 	</body>
  117. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.