Categories
JavaScript

Google Maps full screen

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)
map barcelona

How does it work:

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

 

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);
					}
				 }
			);
	}
}

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:


function createMarker(p) {
   var marker = new GMarker(p);

   GEvent.addListener(marker, "click", function() {
	 st = new GStreetviewPanorama(document.getElementById("streetview"),{latlng:p});});

    return marker;
}

As I said before check the source code of the example 😉