Advanced Search

HTML5: Creating a Static Google Map

/ Published in: HTML
Save to your folder(s)
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

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. 	<title>Geo Location</title>
  7.  
  8. 	<style type="text/css" media="screen">
  9. 		html{ height: 100%; }
  10. 		body{ height: 100%; margin: 0; padding: 0; }
  11. 		#map{ width: 100%; height: 100%; }
  12. 	</style>
  13.  
  14. 		<!-- jQuery Min -->
  15. 		<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  16.  
  17. 		<!-- Google Maps -->
  18. 		<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  19.  
  20. 		<script charset="utf-8" type="text/javascript">
  21. 		mapWidth = screen.width;
  22. 		mapHeight = screen.height;
  23.  
  24. 		$(document).ready(function(){
  25. 			var geo = navigator.geolocation;
  26. 			if( geo ){
  27. 				//Used for Static Maps
  28. 				geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
  29. 			}
  30.  
  31. 			function createStaticMarker( markerColor, markerLabel, lat, lng ){
  32. 				return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;				
  33. 			}
  34.  
  35. 			function createStaticMap( position ){
  36. 				var lat = position.coords.latitude;
  37. 				var lng = position.coords.longitude;
  38. 				var zoom = 20;
  39. 				var sensor = true;
  40.  
  41. 				var img = $("<img>");
  42. 					img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
  43. 								"center=" + 
  44. 								lat + "," +
  45. 								lng + 
  46. 								"&zoom=" + zoom + 
  47. 								"&size=" + mapWidth + "x" + mapHeight + 
  48. 								createStaticMarker( "blue", "1", lat, lng ) + 
  49. 								"&sensor=" + sensor } );
  50. 					return img;
  51. 			}
  52.  
  53. 			function showLocation( position ){
  54. 				var lat = position.coords.latitude;
  55. 				var lng = position.coords.longitude;
  56. 				var latlng = new google.maps.LatLng( lat, lng );
  57.  
  58. 				$("#map").html( createStaticMap( position ) )
  59.  
  60. 			}
  61.  
  62. 			function mapError( e ){
  63. 				var error;
  64. 				switch( e.code ){
  65. 					case 1: 
  66. 						error = "Permission Denied";
  67. 					break;
  68. 					case 2: 
  69. 						error = "Network or Satellites Down";
  70. 					break;
  71. 					case 3: 
  72. 						error = "GeoLocation timed out";
  73. 					break;
  74. 					case 0: 
  75. 						error = "Other Error";
  76. 					break;
  77. 				}
  78. 				$("#map").html( error );
  79. 			}
  80.  
  81.  
  82. 		});
  83. 		</script>
  84.  
  85. 	</head>
  86. 	<body>
  87. 		<div id="map">
  88.  
  89. 		</div>
  90. 	</body>
  91. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.