Fullscreen Google Maps Background - jQuery Snipplr Social Repository

Revision: 56554

at April 3, 2012 17:47 by burnandbass

Updated Code

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Fullscreen Background</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
		
		iframe { 
			vertical-align: top;
		}
		
		#canvas_holder{
			position: fixed;
			top: 0px;
			left: 0px;
			width:100%; 
			height:100%;
			z-index: 0;
		}
		
		#map_canvas{
			width:100%;
			height:100%; 
			position: "absolute"; 
			top: 0px; 
			left: 0px; 
			overflow: "hidden";
		}
		
		#holder{
			width: 300px;
			background: rgba(0,0,0,0.8);
			z-index: 1000;
			position: absolute;
			color: white;
			padding: 10px;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-o-border-radius: 10px;
			-webkit-border-radius: 10px;
			-ms-border-radius: 10px;
		}
		
		a{
			color: white;
		}
      }
    </style>
	
	<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  	
	<script type="text/javascript">
	  	
		/*
		Global
		*/
		var map;
	
		function initialize() {
	    	
			/*
			Basic Setup
			*/
	
			var latLng = new google.maps.LatLng(48.825183,2.1975769);
			
	    	var myOptions = {
				panControl: false,
				zoomControl: false,
				mapTypeControl: false,
				scaleControl: false,
				streetViewControl: false,
				overviewMapControl: false,
				draggable: true,
				disableDoubleClickZoom: true,     //disable zooming
				scrollwheel: false,
	      		zoom: 20,
	      		center: latLng,
	      		mapTypeId: google.maps.MapTypeId.HYBRID //   ROADMAP; SATELLITE; HYBRID; TERRAIN;
			};
	    	
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
						
			/*
			MARKER
			*/
			
			/*
			//for custom image
			var image = 'yourflag.png';
			icon: image 
			
			//for animation marker drop
			animation: google.maps.Animation.DROP
			
			*/
			var markerlatlng = new google.maps.LatLng(48.825183,2.1975769);
			
			var marker = new google.maps.Marker({
			    position: markerlatlng,
			    title:"Hello World!"
			});
			
			marker.setMap(map);
			
			/*
			INFO Bubble
			*/
			
			myInfoWindowOptions = {
				content: '<div class="info-window-content"><h4>Hello! I am a Google Map custom marker</h4></div>',
				maxWidth: 275
			};
			
			infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.open(map,marker);
			});

			google.maps.event.addListener(marker, 'dragstart', function(){
				infoWindow.close();
			});
			
			infoWindow.open(map,marker);
	
	
		}//end initialize
	
		
		/*
		onLoad
		*/
		$(function(){
			initialize();
			
			$("#zo").click(function(event){
				event.preventDefault(); 
				map.setZoom( map.getZoom()-1 );
				//map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
			});
			
			$("#zi").click(function(event){
				event.preventDefault(); 
				map.setZoom( map.getZoom()+1 );
			});
			
			$("#gt").click(function(event){
				event.preventDefault(); 
				var lt1 = new google.maps.LatLng(36.114739, -115.171840);
				//map.setZoom( 16 );
				map.panTo(lt1);
			});
			
		});
			
	</script>

  </head>
  <body>
	
	<div id="holder">
		<a href="#" id="zi">Zoom In</a>
		<a href="#" id="zo">Zoom Out</a>
		<a href="#" id="gt">GoTo</a>
	</div>	
	
	<!--Google Maps APIv3 Background-->
	<div id="canvas_holder">
		<div id="map_canvas"></div>
	</div><!-- End Google Maps Background -->
	
</body>
</html>

Revision: 56553

at April 3, 2012 05:37 by burnandbass

Updated Code

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Fullscreen Background</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
		
		iframe { 
			vertical-align: top;
		}
		
		#canvas_holder{
			position: fixed;
			top: 0px;
			left: 0px;
			width:100%; 
			height:100%;
		}
		
		#map_canvas{
			width:100%;
			height:100%; 
			position: "absolute"; 
			top: 0px; 
			left: 0px; 
			overflow: "hidden";
		}
		
      }
    </style>
	
	<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  	
	<script type="text/javascript">
	  	function initialize() {
	    	
			/*
			Basic Setup
			*/
	
			var latLng = new google.maps.LatLng(48.825183,2.1975769);
			
	    	var myOptions = {
				panControl: false,
				zoomControl: false,
				mapTypeControl: false,
				scaleControl: false,
				streetViewControl: false,
				overviewMapControl: false,
	      		zoom: 20,
	      		center: latLng,
	      		mapTypeId: google.maps.MapTypeId.HYBRID //   ROADMAP; SATELLITE; HYBRID; TERRAIN;
			};
	    	
			var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			
			/*
			MARKER
			*/
			
			/*
			//for custom image
			var image = 'yourflag.png';
			icon: image 
			
			//for animation marker drop
			animation: google.maps.Animation.DROP
			
			*/
			var markerlatlng = new google.maps.LatLng(48.825183,2.1985795);
			
			var marker = new google.maps.Marker({
			    position: markerlatlng,
			    title:"Hello World!"
			});
			
			marker.setMap(map);
			
			/*
			INFO Bubble
			*/
			
			myInfoWindowOptions = {
				content: '<div class="info-window-content"><h4>Hello! I am a Google Map custom marker</h4></div>',
				maxWidth: 275
			};
			
			infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.open(map,marker);
			});

			google.maps.event.addListener(marker, 'dragstart', function(){
				infoWindow.close();
			});
			
			infoWindow.open(map,marker);
	
	
		}//end initialize
	
		
		/*
		onLoad
		*/
		$(function(){
			initialize();
		});
			
	</script>

  </head>
  <body>	
	
	<!--Google Maps APIv3 Background-->
	<div id="canvas_holder">
		<div id="map_canvas"></div>
	</div><!-- End Google Maps Background -->
	
</body>
</html>

Revision: 56552

at April 3, 2012 05:17 by burnandbass

Initial Code

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example - Fullscreen BG</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
		
		iframe { 
			vertical-align: top;
		}
		
		#canvas_holder{
			position: fixed;
			top: 0px;
			left: 0px;
			width:100%; 
			height:100%;
		}
		
		#map_canvas{
			width:100%;
			height:100%; 
			position: "absolute"; 
			top: 0px; 
			left: 0px; 
			overflow: "hidden";
		}
		
      }
    </style>
	
	<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  	
	<script type="text/javascript">
	  	function initialize() {
	    	var latlng = new google.maps.LatLng(48.825183,2.1985795);
	    	var myOptions = {
				panControl: false,
				zoomControl: false,
				mapTypeControl: false,
				scaleControl: false,
				streetViewControl: false,
				overviewMapControl: false,
	      		zoom: 28,
	      		center: latlng,
	      		mapTypeId: google.maps.MapTypeId.HYBRID			    
			};
	    	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	  	}
		
		/*
		onLoad
		*/
		$(function(){
			initialize();
		});
			
	</script>

  </head>
  <body>	
	
	<!--Google Maps APIv3 Background-->
	<div id="canvas_holder">
		<div id="map_canvas"></div>
	</div><!-- End Google Maps Background -->
	
</body>
</html>

Initial URL

Initial Description

This is the whole HTML page with JS/CSS embeded, uses Google Maps API V3

Initial Title

Fullscreen Google Maps Background

Initial Tags

Initial Language

jQuery

Choose a language for easy browsing: