Skip to content

Instantly share code, notes, and snippets.

@agibsonsw

agibsonsw/gist:4254597

Created December 11, 2012 00:16
Show Gist options
  • Save agibsonsw/4254597 to your computer and use it in GitHub Desktop.
Save agibsonsw/4254597 to your computer and use it in GitHub Desktop.
Download ZIP
Temp tidied
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment