GMAP - Multiple Maps - User Input Accepted

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="Show Me" />
</div>
<div class="bizamajig-ui-map"></div>
<div class="event" itemtype="http://schema.org/Place" itemscope=""> <!-- start contact destination item -->
    <h2><span class="place-name" itemprop="name">61 N. Merrimon Ave.</span></h2>
	Asheville Location
    <br />
	<span itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
        <span itemprop="streetAddress">61 N. Merrimon Ave.</span><br />
		<span itemprop="addressLocality">Asheville</span>,
		<span itemprop="addressRegion">NC</span>,
		<span itemprop="addressCountry">US</span>
	</span>
</div>
<script>
/*!
 * jQuery FN Google Map 3.0-rc
 * http://code.google.com/p/jquery-ui-map/
 * Copyright (c) 2010 - 2012 Johan Säll Larsson
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 */
( function($) {
	
	/**
	 * @param name:string
	 * @param prototype:object
	 */
	$.a = function(name, prototype) {
		
		var namespace = name.split('.')[0];
        name = name.split('.')[1];
		
		$[namespace] = $[namespace] || {};
		$[namespace][name] = function(options, element) {
			if ( arguments.length ) {
				this._setup(options, element);
			}
		};
		
		$[namespace][name].prototype = $.extend({
			'namespace': namespace,
			'pluginName': name
        }, prototype);
		
		$.fn[name] = function(options) {
			
			var isMethodCall = typeof options === "string",
				args = Array.prototype.slice.call(arguments, 1),
				returnValue = this;
			
			if ( isMethodCall && options.substring(0, 1) === '_' ) { 
				return returnValue; 
			}

			this.each(function() {
				var instance = $.data(this, name);
				if (!instance) {
					instance = $.data(this, name, new $[namespace][name](options, this));
				}
				if (isMethodCall) {
					var value =...

CSS

html, body, .bizamajig-ui-map {
        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

/*
//    Custom Icon Images
//
//    SEE: http://jsfiddle.net/bizamajig/vqTMH/
//
//    Multiple Markers from Array
//
//    SEE: http://jsfiddle.net/bizamajig/Zxzfr/
//
//    SEE: http://jsfiddle.net/bizamajig/gmsNF/
//
//    JQUI Autocomplete
//
//    SEE: http://stackoverflow.com/questions/8082405/parsing-address-components-in-google-maps-upon-autocomplete-select
//
//    SEE: http://gergerconsulting.blogspot.com/2011/02/google-maps-api-v3-location-search-with.html
//
//    SEE: http://gerger.co/blog/2011/02/17/google-maps-api-v3-location-search-with-jquery-autocomplete-plugin/
//
//    SEE: Address Picker: http://xilinus.com/jquery-addresspicker/demos/index.html
//
//    Center Map
//
//    SEE: http://stackoverflow.com/questions/9563314/how-to-re-center-a-map-using-jquery-ui-map
//
//    Microdata
//
//    SEE: http://www.ibm.com/developerworks/library/x-html5microdata1/index.html
//    SEE: http://www.ibm.com/developerworks/library/x-html5microdata2/
//
//    AJAX Storing and Retreiving Points
//
//    SEE: http://marcgrabanski.com/jquery-google-maps-tutorial-ajax-php-mysql/
*/
var geocoder;
var map;
var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
function bizamajig__map__init() {
//DEBUG MAP//console.log( 'ENTER - bizamajig__map__init - MAP = ', map );
//
//    Example Geocode Lookup For Address to Geo Translation
//    https://maps.googleapis.com/maps/api/geocode/json?address=56%20college%20st.,%20asheville,%20nc,%2028802
//
var $element                 = $( '.bizamajig-ui-map' );
var $microdata_container     = $element.next( '[itemscope]' );
var $address_container       = $microdata_container.find( '[itemprop="address"]' );
var input_place_name         = $microdata_container.find( '.place-name' ).text();
var input_address_line_1     = $address_container.find( '[itemprop="streetAddress"]' ).text();
var input_city               = $address_container.find( '[itemprop="addressLocality"]' ).text();
var input_state            ...