GMAP - Research for Multiple Maps with User Input

by bizamajig

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="panel">
    <input id="address" type="textbox" value="56 college st., asheville, nc, 28802" />
    <input type="button" id="getmap" name="getmap" value="Geocode" />
</div>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

JavaScript

var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 15,
        center: latlng
    }
    $map_container = $('#map-canvas');
    map = new google.maps.Map( $map_container[0], mapOptions);
}

function codeAddress( request__context ) {
    alert( request__context.address );
    geocoder.geocode({
        'address':                request__context.address
    }, function(results, status) {
        if ( status == google.maps.GeocoderStatus.OK ) {
            map.setCenter( results[0].geometry.location );
            var marker = new google.maps.Marker({
                map:              map,
                position:         results[0].geometry.location
            });
        }
        else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

$( document ).on( 'click', '#getmap', function( e ) {
    var address 			        = $('#address').val();
	codeAddress({
		address: 					address
	});
	return false;
});

google.maps.event.addDomListener(window, 'load', initialize);