Google Maps full screen

October 26, 2009, 10:58 AM

What about having a full screen Google Maps APP?

It should be not so difficult, but what if we add street search, mouse wheel zoom, maps redimension and street view?

Example:(check source code for full implementation)

How does it work:

To have Google Maps in full screen we need a a bit of css+HTML:

 <style type="text/css">
  v\:* {behavior:url(#default#VML);}
 html, body {width: 100%; height: 100%}
 body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px}
 </style>
<div id="map" style="width: 100%; height: 100%;"></div>

For the street search we need the geocoder and a input:

function showAddress(address) {
	 if (geocoder) {
		geocoder.getLatLng(address,
			function(point) {
				if (!point) {
					  alert(address + " not found");//no ecnontrado
				} else {
					map.setCenter(point, 16);
					map.addOverlay(createMarker(point));
					map.openInfoWindow(point,address);
					}
				 }
			);
	}
}

<form id="form" action="#" onsubmit="showAddress(this.address.value); return false;" >
	<input type="text" size="25" name="address" onclick="this.select();" value="address to search here" />
	<input type="submit" value="Search" />
</form>

Wheel zoom is really easy:

map.enableScrollWheelZoom();

Map redimension should work with something like this:

if (window.attachEvent)window.attachEvent("onresize", function() {this.map.onResize()} );

Street view implementation on a marker:

<div id="streetview" style="width: 100%; height: 100%;display: none;"></div>
function createMarker(p) {
   var marker = new GMarker(p);
 
   GEvent.addListener(marker, "click", function() {
	 st = new GStreetviewPanorama(document.getElementById("streetview"),{latlng:p});});  
 
    return marker;
}