agibsonsw/gist:4254597

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Overlay Simple</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
    rel="stylesheet">

 <style>
body { font-family: Tahoma;
font-size: 14px;
line-height: 2em;
}
p { font-size: 9px; }

input {
    position:fixed; top:6%; right:2%; padding:10px;
    z-index:100001;

    border: 2px solid  rgba(255, 0, 0, 0.4);
    background: -webkit-gradient(linear, bottom, left 100px, from(#ffffff), to(#ffffff));
    background: -moz-linear-gradient(bottom, #ffffff, #ffffff 100px);

    width:250px;
    height:20px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;

    line-height: 24px;
    font-weight: bold;
    color: #9b0768;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input.notfound {
    position:fixed; top:6%; right:2%; padding:10px;

    z-index:100001;

    border: 2px solid  rgba(255, 0, 0, 0.4);
    position:absolute;
    background: -webkit-gradient(linear, bottom, left 100px, from(#FFF), to(#FFF));
    background: -moz-linear-gradient(bottom, #FFF, #FFF 100px);
    width:250px;
    height:20px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;

    line-height: 24px;
    font-weight: bold;
    color: #9b0768;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.classname {
    box-shadow:inset 0px 1px 0px 0px #fbafe3;
    background:-webkit-gradient( linear, left top, left bottom,
        color-stop(0.05, #8c0a4f), color-stop(1, #ef027d) );
    background:-moz-linear-gradient( center top, #8c0a4f 5%, #ef027d 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c0a4f',
        endColorstr='#ef027d');
    background-color:#8c0a4f;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;

}
.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom,
        color-stop(0.05, #ef027d), color-stop(1, #8c0a4f) );
    background:-moz-linear-gradient( center top, #ef027d 5%, #8c0a4f 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d',
        endColorstr='#8c0a4f');
    background-color:#ef027d;
}
.classname:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places">
</script>
<script type="text/javascript">
// setup zoom level and image bounds to create overlay [Manaf]
var overlay, overlay1, overlay2;

USGSOverlay.prototype = new google.maps.OverlayView();

function initialize() {
    var myLatLng = new google.maps.LatLng(42.176432,-71.279297);
    var mapOptions = {
        zoom: 13,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    var swBound = new google.maps.LatLng(42.03379,-71.790161);
    var neBound = new google.maps.LatLng(42.302503,-71.174927);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    // Manaf added for search input
    var input = document.getElementById('searchTextField');
    var options = {
        types: [],
        componentRestrictions: {country: 'usa'}
    };

    autocomplete = new google.maps.places.Autocomplete(input, options);

    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();

    //  added to create bouncing effect

    var marker = new google.maps.Marker({
        map: map,
        icon:'http://www.quarktet.com/Icon-small.jpg'
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();

        marker.setVisible(true);
        marker.setAnimation(google.maps.Animation.BOUNCE);

        // Added search possibility google api
        input.className = '';
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            alert('Not found');
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);  // Why 17? Because it looks good.
        }
        var image = new google.maps.MarkerImage(
            place.icon,
            new google.maps.Size(71, 71),
            new google.maps.Point(0, 0),
            new google.maps.Point(17, 34),
            new google.maps.Size(35, 35)
        );
        marker.setIcon(image);
        marker.setPosition(place.geometry.location);

        var address = '';
        if (place.address_components) {
            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }

        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address +
            '<br>' + place.geometry.location + '<br>Would You Like To Report Issues?');
        infowindow.open(map, marker);
    });

    // Photograph courtesy of the U.S. Geological Survey
    var srcImage = 'http://www.tinyuploads.com/images/4JMibO.png';
    overlay = new USGSOverlay(bounds, srcImage, map);

    swBound = new google.maps.LatLng(42.127779,-71.372766); // change these numbers
    neBound = new google.maps.LatLng(42.200814,-71.2502); // and these
    bounds = new google.maps.LatLngBounds(swBound, neBound);

    srcImage = 'http://www.tinyuploads.com/images/wi6Wmc.png';
    overlay1 = new USGSOverlay(bounds, srcImage, map);
    // and repeat for overlay3

    swBound = new google.maps.LatLng(42.051103,-71.448383); // change these numbers
    neBound = new google.maps.LatLng(42.200814,-71.2502); // and these
    bounds = new google.maps.LatLngBounds(swBound, neBound);

    srcImage = 'http://www.tinyuploads.com/images/STiWU9.png';
    overlay2 = new USGSOverlay(bounds, srcImage, map);
}

function USGSOverlay(bounds, image, map) {
    // Now initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;

    // We define a property to hold the image's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    // Explicitly call setMap on this overlay
    this.setMap(map);
}

USGSOverlay.prototype.onAdd = function () {
    // Note: an overlay's receipt of add() indicates that
    // the map's panes are now available for attaching
    // the overlay to the map via the DOM.

    // Create the DIV and set some basic attributes.
    var div = document.createElement('div');
    div.style.border = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    // Create an IMG element and attach it to the DIV.
    var img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    div.appendChild(img);

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayImage pane.
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div_);
}

USGSOverlay.prototype.draw = function () {
    // Size and position the overlay. We use a southwest and northeast
    // position of the overlay to peg it to the correct position and size.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the southwest and northeast coordinates of this overlay
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to resize the DIV.
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's DIV to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
}

USGSOverlay.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);
}

USGSOverlay.prototype.hide = function() {
    if (this.div_) {
        this.div_.style.visibility = 'hidden';
    }
}

USGSOverlay.prototype.show = function () {
    if (this.div_) {
        this.div_.style.visibility = 'visible';
    }
}

USGSOverlay.prototype.toggle = function () {
    if (this.div_) {
        if (this.div_.style.visibility == 'hidden') {
            this.show();
        } else {
            this.hide();
        }
    }
}

USGSOverlay.prototype.toggleDOM = function () {
    if (this.getMap()) {
        this.setMap(null);
    } else {
        this.setMap(this.map_);
    }
}
</script>

</head>
<body onload="initialize()">
test page

<div class='overlay2'> <a href="#" class="classname" onclick="overlay.toggle();">
    TEST OVERLAY 1</a></div>
<div class='overlay2'> <a href="#" class="classname" onclick="overlay1.toggle();">
    TEST OVERLAY2</a></div>
<div class='overlay2'> <a href="#" class="classname" onclick="overlay2.toggle();">
    TEST OVERLAY3</a></div>

<input id="searchTextField" type="text" class="input" size="500" style="font-size: 12px;">

<div id="map_canvas" style="border: 1px solid gray; border-bottom: 1px;"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Google Maps JavaScript API v3 Example: Overlay Simple</title>
	<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
	rel="stylesheet">

	<style>
	body { font-family: Tahoma;
	font-size: 14px;
	line-height: 2em;
	}
	p { font-size: 9px; }

	input {
	position:fixed; top:6%; right:2%; padding:10px;
	z-index:100001;

	border: 2px solid rgba(255, 0, 0, 0.4);
	background: -webkit-gradient(linear, bottom, left 100px, from(#ffffff), to(#ffffff));
	background: -moz-linear-gradient(bottom, #ffffff, #ffffff 100px);

	width:250px;
	height:20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;

	line-height: 24px;
	font-weight: bold;
	color: #9b0768;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding:10px;
	border: 1px solid #999;
	border: inset 1px solid #333;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	}

	input.notfound {
	position:fixed; top:6%; right:2%; padding:10px;

	z-index:100001;

	border: 2px solid rgba(255, 0, 0, 0.4);
	position:absolute;
	background: -webkit-gradient(linear, bottom, left 100px, from(#FFF), to(#FFF));
	background: -moz-linear-gradient(bottom, #FFF, #FFF 100px);
	width:250px;
	height:20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;

	line-height: 24px;
	font-weight: bold;
	color: #9b0768;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding:10px;
	border: 1px solid #999;
	border: inset 1px solid #333;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	}
	.classname {
	box-shadow:inset 0px 1px 0px 0px #fbafe3;
	background:-webkit-gradient( linear, left top, left bottom,
	color-stop(0.05, #8c0a4f), color-stop(1, #ef027d) );
	background:-moz-linear-gradient( center top, #8c0a4f 5%, #ef027d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c0a4f',
	endColorstr='#ef027d');
	background-color:#8c0a4f;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;

	}
	.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom,
	color-stop(0.05, #ef027d), color-stop(1, #8c0a4f) );
	background:-moz-linear-gradient( center top, #ef027d 5%, #8c0a4f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d',
	endColorstr='#8c0a4f');
	background-color:#ef027d;
	}
	.classname:active {
	position:relative;
	top:1px;
	}
	/* This imageless css button was generated by CSSButtonGenerator.com */
	</style>

	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places">
	</script>
	<script type="text/javascript">
	// setup zoom level and image bounds to create overlay [Manaf]
	var overlay, overlay1, overlay2;

	USGSOverlay.prototype = new google.maps.OverlayView();

	function initialize() {
	var myLatLng = new google.maps.LatLng(42.176432,-71.279297);
	var mapOptions = {
	zoom: 13,
	center: myLatLng,
	mapTypeId: google.maps.MapTypeId.TERRAIN
	};

	var map = new google.maps.Map(document.getElementById('map_canvas'),
	mapOptions);

	var swBound = new google.maps.LatLng(42.03379,-71.790161);
	var neBound = new google.maps.LatLng(42.302503,-71.174927);
	var bounds = new google.maps.LatLngBounds(swBound, neBound);

	// Manaf added for search input
	var input = document.getElementById('searchTextField');
	var options = {
	types: [],
	componentRestrictions: {country: 'usa'}
	};

	autocomplete = new google.maps.places.Autocomplete(input, options);

	autocomplete.bindTo('bounds', map);

	var infowindow = new google.maps.InfoWindow();

	// added to create bouncing effect

	var marker = new google.maps.Marker({
	map: map,
	icon:'http://www.quarktet.com/Icon-small.jpg'
	});

	google.maps.event.addListener(autocomplete, 'place_changed', function() {
	infowindow.close();

	marker.setVisible(true);
	marker.setAnimation(google.maps.Animation.BOUNCE);

	// Added search possibility google api
	input.className = '';
	var place = autocomplete.getPlace();
	if (!place.geometry) {
	// Inform the user that the place was not found and return.
	input.className = 'notfound';
	alert('Not found');
	return;
	}

	// If the place has a geometry, then present it on a map.
	if (place.geometry.viewport) {
	map.fitBounds(place.geometry.viewport);
	} else {
	map.setCenter(place.geometry.location);
	map.setZoom(15); // Why 17? Because it looks good.
	}
	var image = new google.maps.MarkerImage(
	place.icon,
	new google.maps.Size(71, 71),
	new google.maps.Point(0, 0),
	new google.maps.Point(17, 34),
	new google.maps.Size(35, 35)
	);
	marker.setIcon(image);
	marker.setPosition(place.geometry.location);

	var address = '';
	if (place.address_components) {
	address = [
	(place.address_components[0] && place.address_components[0].short_name \|\| ''),
	(place.address_components[1] && place.address_components[1].short_name \|\| ''),
	(place.address_components[2] && place.address_components[2].short_name \|\| '')
	].join(' ');
	}

	infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address +
	'<br>' + place.geometry.location + '<br>Would You Like To Report Issues?');
	infowindow.open(map, marker);
	});

	// Photograph courtesy of the U.S. Geological Survey
	var srcImage = 'http://www.tinyuploads.com/images/4JMibO.png';
	overlay = new USGSOverlay(bounds, srcImage, map);

	swBound = new google.maps.LatLng(42.127779,-71.372766); // change these numbers
	neBound = new google.maps.LatLng(42.200814,-71.2502); // and these
	bounds = new google.maps.LatLngBounds(swBound, neBound);

	srcImage = 'http://www.tinyuploads.com/images/wi6Wmc.png';
	overlay1 = new USGSOverlay(bounds, srcImage, map);
	// and repeat for overlay3

	swBound = new google.maps.LatLng(42.051103,-71.448383); // change these numbers
	neBound = new google.maps.LatLng(42.200814,-71.2502); // and these
	bounds = new google.maps.LatLngBounds(swBound, neBound);

	srcImage = 'http://www.tinyuploads.com/images/STiWU9.png';
	overlay2 = new USGSOverlay(bounds, srcImage, map);
	}

	function USGSOverlay(bounds, image, map) {
	// Now initialize all properties.
	this.bounds_ = bounds;
	this.image_ = image;
	this.map_ = map;

	// We define a property to hold the image's
	// div. We'll actually create this div
	// upon receipt of the add() method so we'll
	// leave it null for now.
	this.div_ = null;

	// Explicitly call setMap on this overlay
	this.setMap(map);
	}

	USGSOverlay.prototype.onAdd = function () {
	// Note: an overlay's receipt of add() indicates that
	// the map's panes are now available for attaching
	// the overlay to the map via the DOM.

	// Create the DIV and set some basic attributes.
	var div = document.createElement('div');
	div.style.border = 'none';
	div.style.borderWidth = '0px';
	div.style.position = 'absolute';

	// Create an IMG element and attach it to the DIV.
	var img = document.createElement('img');
	img.src = this.image_;
	img.style.width = '100%';
	img.style.height = '100%';
	div.appendChild(img);

	// Set the overlay's div_ property to this DIV
	this.div_ = div;

	// We add an overlay to a map via one of the map's panes.
	// We'll add this overlay to the overlayImage pane.
	var panes = this.getPanes();
	panes.overlayImage.appendChild(this.div_);
	}

	USGSOverlay.prototype.draw = function () {
	// Size and position the overlay. We use a southwest and northeast
	// position of the overlay to peg it to the correct position and size.
	// We need to retrieve the projection from this overlay to do this.
	var overlayProjection = this.getProjection();

	// Retrieve the southwest and northeast coordinates of this overlay
	// in latlngs and convert them to pixels coordinates.
	// We'll use these coordinates to resize the DIV.
	var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
	var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

	// Resize the image's DIV to fit the indicated dimensions.
	var div = this.div_;
	div.style.left = sw.x + 'px';
	div.style.top = ne.y + 'px';
	div.style.width = (ne.x - sw.x) + 'px';
	div.style.height = (sw.y - ne.y) + 'px';
	}

	USGSOverlay.prototype.onRemove = function () {
	this.div_.parentNode.removeChild(this.div_);
	}

	USGSOverlay.prototype.hide = function() {
	if (this.div_) {
	this.div_.style.visibility = 'hidden';
	}
	}

	USGSOverlay.prototype.show = function () {
	if (this.div_) {
	this.div_.style.visibility = 'visible';
	}
	}

	USGSOverlay.prototype.toggle = function () {
	if (this.div_) {
	if (this.div_.style.visibility == 'hidden') {
	this.show();
	} else {
	this.hide();
	}
	}
	}

	USGSOverlay.prototype.toggleDOM = function () {
	if (this.getMap()) {
	this.setMap(null);
	} else {
	this.setMap(this.map_);
	}
	}
	</script>

	</head>
	<body onload="initialize()">
	test page

	<div class='overlay2'> <a href="#" class="classname" onclick="overlay.toggle();">
	TEST OVERLAY 1</a></div>
	<div class='overlay2'> <a href="#" class="classname" onclick="overlay1.toggle();">
	TEST OVERLAY2</a></div>
	<div class='overlay2'> <a href="#" class="classname" onclick="overlay2.toggle();">
	TEST OVERLAY3</a></div>

	<input id="searchTextField" type="text" class="input" size="500" style="font-size: 12px;">

	<div id="map_canvas" style="border: 1px solid gray; border-bottom: 1px;"></div>
	</body>
	</html>