<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
	   html {height:100%}
	   body {height:100%;margin:0;padding:0}
	   #googleMap {height:40%}
   </style>

	<title>Google Map Template with Geocoded Address</title>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>	<!-- Google Maps API -->
	<script>
	var map;	// Google map object
	
	// Initialize and display a google map
	function Init()
	{
		// Create a Google coordinate object for where to initially center the map
		document.getElementById( "address" ).value = "Milano, Italia";
		var latlng = new google.maps.LatLng( 45.4654219, 9.18592430000001);	// Milan, Italy
		
		// Map options for how to display the Google map
		var mapOptions = { zoom: 17, center: latlng  };
		
		// Show the Google map in the div with the attribute id 'map-canvas'.
		map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	}
	
	// Update the Google map for the user's inputted address
	function UpdateMap( )
	{
		var geocoder = new google.maps.Geocoder();    // instantiate a geocoder object
		
		// Get the user's inputted address
		var address = document.getElementById( "address" ).value;
	
		// Make asynchronous call to Google geocoding API
		geocoder.geocode( { 'address': address }, function(results, status) 
		{
			var addr_type = results[0].types[0];	// type of address inputted that was geocoded
			if ( status == google.maps.GeocoderStatus.OK ) 
			{
				var i;
				document.getElementById('dropd').options.length = 0;
				for (i=0; i<results.length; i++)
					{
						var opt = document.createElement('option');
						opt.value = results[i].formatted_address;
						opt.innerHTML = results[i].formatted_address;
						document.getElementById('dropd').options.add(opt);
					}
					ShowLocation( results[0].geometry.location, address, addr_type );
			}
			else     
					alert("Geocode was not successful for the following reason: " + status);        
		});
	}
	
	// Show the location (address) on the map.
	function ShowLocation( latlng, address, addr_type )
	{
		// Center the map at the specified location
		map.setCenter( latlng );
		
		// Set the zoom level according to the address level of detail the user specified
		var zoom = 17;
		switch ( addr_type )
		{
		case "administrative_area_level_1"	: zoom = 6; break;		// user specified a state
		case "locality"						: zoom = 10; break;		// user specified a city/town
		case "street_address"			: zoom = 17; break;		// user specified a street address
		}
		map.setZoom( zoom );
		
		// Place a Google Marker at the same location as the map center 
		// When you hover over the marker, it will display the title
		if (ShowLocation.marker)
		{
		   ShowLocation.marker.setMap(null);
		   ShowLocation.marker = null;
		}
		ShowLocation.marker = new google.maps.Marker( { 
			position: latlng,     
			map: map,      
			title: address
		});
		
		// Create an InfoWindow for the marker
		var contentString = "" + address + "";	// HTML text to display in the InfoWindow
		var infowindow = new google.maps.InfoWindow( { content: contentString } );
		
		// Set event to display the InfoWindow anchored to the marker when the marker is clicked.
		google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
	}

	function SelChanged()
	{
		dropdown = document.getElementById('dropd');
		ix = dropdown.selectedIndex;
		var selected = dropdown.options[ix].value;
		if (document.getElementById( "address" ).value != selected)
		{
			document.getElementById( "address" ).value = selected;
			UpdateMap();
		}
	}

	function ClrInput()
	{
		document.getElementById( "address" ).value = "";
		document.getElementById('dropd').options.length = 0;
	}
	
	// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
	google.maps.event.addDomListener( window, 'load', Init );

	</script>

	<style>
	/* style settings for Google map */
	#map-canvas
	{
		width : 100%; 	/* map width */
		height: 500px;	/* map height */
	}
	</style>
</head>
<body>
<div align="center">
	<!-- Dislay Google map here -->
	<div id='map-canvas' > </div>
    <br>
	<div>
		 <label for="address"> Address: </label>
		 <input type="text" id="address"/>
		 <button onclick="UpdateMap()">Locate </button>
      
		<button onclick="ClrInput()">ClrInput </button>
    <br>
    <select id="dropd" size=1 onChange="SelChanged()">
		<option value="milano">Milano, Italia </option>
    </select>
	</div>
</div>
</body>
</html>
©2014 Luigi Margarita