Advanced Search

Return to Snippet

Revision: 43469
at March 24, 2011 17:08 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 ){
				//Used for Static Maps
				geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
			}
			
			function createStaticMarker( markerColor, markerLabel, lat, lng ){
				return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;				
			}
			
			function createStaticMap( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var zoom = 20;
				var sensor = true;
				
				var img = $("<img>");
					img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
								"center=" + 
								lat + "," +
								lng + 
								"&zoom=" + zoom + 
								"&size=" + mapWidth + "x" + mapHeight + 
								createStaticMarker( "blue", "1", lat, lng ) + 
								"&sensor=" + sensor } );
					return img;
			}
			
			function showLocation( position ){
				var lat = position.coords.latitude;
				var lng = position.coords.longitude;
				var latlng = new google.maps.LatLng( lat, lng );
				
				$("#map").html( createStaticMap( position ) )
				
			}

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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
HTML5: Creating a Static Google Map

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
jquery, html5

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML