Advanced Search

Fullscreen Google Maps Background

/ Published in: jQuery
Save to your folder(s)
This is the whole HTML page with JS/CSS embeded, uses Google Maps API V3

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Google Maps JavaScript API v3 Fullscreen Background</title>
  5.     <meta name="viewport"
  6.         content="width=device-width, initial-scale=1.0, user-scalable=no">
  7.     <meta charset="UTF-8">
  8.     <style type="text/css">
  9.  
  10. 		iframe { 
  11. 			vertical-align: top;
  12. 		}
  13.  
  14. 		#canvas_holder{
  15. 			position: fixed;
  16. 			top: 0px;
  17. 			left: 0px;
  18. 			width:100%; 
  19. 			height:100%;
  20. 			z-index: 0;
  21. 		}
  22.  
  23. 		#map_canvas{
  24. 			width:100%;
  25. 			height:100%; 
  26. 			position: "absolute"; 
  27. 			top: 0px; 
  28. 			left: 0px; 
  29. 			overflow: "hidden";
  30. 		}
  31.  
  32. 		#holder{
  33. 			width: 300px;
  34. 			background: rgba(0,0,0,0.8);
  35. 			z-index: 1000;
  36. 			position: absolute;
  37. 			color: white;
  38. 			padding: 10px;
  39. 			border-radius: 10px;
  40. 			-moz-border-radius: 10px;
  41. 			-o-border-radius: 10px;
  42. 			-webkit-border-radius: 10px;
  43. 			-ms-border-radius: 10px;
  44. 		}
  45.  
  46. 		a{
  47. 			color: white;
  48. 		}
  49.       }
  50.     </style>
  51.  
  52. 	<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  53. 	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  54.  
  55. 	<script type="text/javascript">
  56.  
  57. 		/*
  58. 		Global
  59. 		*/
  60. 		var map;
  61.  
  62. 		function initialize() {
  63.  
  64. 			/*
  65. 			Basic Setup
  66. 			*/
  67.  
  68. 			var latLng = new google.maps.LatLng(48.825183,2.1975769);
  69.  
  70. 	    	var myOptions = {
  71. 				panControl: false,
  72. 				zoomControl: false,
  73. 				mapTypeControl: false,
  74. 				scaleControl: false,
  75. 				streetViewControl: false,
  76. 				overviewMapControl: false,
  77. 				draggable: true,
  78. 				disableDoubleClickZoom: true,     //disable zooming
  79. 				scrollwheel: false,
  80. 	      		zoom: 20,
  81. 	      		center: latLng,
  82. 	      		mapTypeId: google.maps.MapTypeId.HYBRID //   ROADMAP; SATELLITE; HYBRID; TERRAIN;
  83. 			};
  84.  
  85. 			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  86.  
  87. 			/*
  88. 			MARKER
  89. 			*/
  90.  
  91. 			/*
  92. 			//for custom image
  93. 			var image = 'yourflag.png';
  94. 			icon: image 
  95.  
  96. 			//for animation marker drop
  97. 			animation: google.maps.Animation.DROP
  98.  
  99. 			*/
  100. 			var markerlatlng = new google.maps.LatLng(48.825183,2.1975769);
  101.  
  102. 			var marker = new google.maps.Marker({
  103. 			    position: markerlatlng,
  104. 			    title:"Hello World!"
  105. 			});
  106.  
  107. 			marker.setMap(map);
  108.  
  109. 			/*
  110. 			INFO Bubble
  111. 			*/
  112.  
  113. 			myInfoWindowOptions = {
  114. 				content: '<div class="info-window-content"><h4>Hello! I am a Google Map custom marker</h4></div>',
  115. 				maxWidth: 275
  116. 			};
  117.  
  118. 			infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
  119.  
  120. 			google.maps.event.addListener(marker, 'click', function() {
  121. 				infoWindow.open(map,marker);
  122. 			});
  123.  
  124. 			google.maps.event.addListener(marker, 'dragstart', function(){
  125. 				infoWindow.close();
  126. 			});
  127.  
  128. 			infoWindow.open(map,marker);
  129.  
  130.  
  131. 		}//end initialize
  132.  
  133.  
  134. 		/*
  135. 		onLoad
  136. 		*/
  137. 		$(function(){
  138. 			initialize();
  139.  
  140. 			$("#zo").click(function(event){
  141. 				event.preventDefault(); 
  142. 				map.setZoom( map.getZoom()-1 );
  143. 				//map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
  144. 			});
  145.  
  146. 			$("#zi").click(function(event){
  147. 				event.preventDefault(); 
  148. 				map.setZoom( map.getZoom()+1 );
  149. 			});
  150.  
  151. 			$("#gt").click(function(event){
  152. 				event.preventDefault(); 
  153. 				var lt1 = new google.maps.LatLng(36.114739, -115.171840);
  154. 				//map.setZoom( 16 );
  155. 				map.panTo(lt1);
  156. 			});
  157.  
  158. 		});
  159.  
  160. 	</script>
  161.  
  162.   </head>
  163.   <body>
  164.  
  165. 	<div id="holder">
  166. 		<a href="#" id="zi">Zoom In</a>
  167. 		<a href="#" id="zo">Zoom Out</a>
  168. 		<a href="#" id="gt">GoTo</a>
  169. 	</div>	
  170.  
  171. 	<!--Google Maps APIv3 Background-->
  172. 	<div id="canvas_holder">
  173. 		<div id="map_canvas"></div>
  174. 	</div><!-- End Google Maps Background -->
  175.  
  176. </body>
  177. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.