paco-valdez/OverlayViewDemo.html

## OverlayViewDemo.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Adding a Custom Overlay</title>
    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #map-canvas {
        height: 100%;
        width: 70%;
        padding: 0px;
        float:left;
      }
      #info-box{
        height: 100%;
        width: 30%;
        float:left;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
// [START region_initialization]
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class.
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

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

var swMarker;
var neMarker;
var map;
// Initialize the map and the custom overlay.

function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(62.323907, -150.109291),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(62.281819, -150.287132);
  var neBound = new google.maps.LatLng(62.400471, -150.005608);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.png';

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);

  // Let's create two markers that will act as holders of the Overlay bounds.
  swMarker = new google.maps.Marker({
    position: swBound,
    map: map, // handle of the map
    draggable:true
  });
  neMarker = new google.maps.Marker({
    position: neBound,
    map: map, // handle of the map
    draggable:true
  });

  //this callback will be called everytime the markers are moved
  // updating the Overlay bounds.
  var dragcallback = function(){
    document.getElementById('sw-lat').value = swMarker.position.lat();
    document.getElementById('sw-lon').value = swMarker.position.lng();
    document.getElementById('ne-lat').value = neMarker.position.lat()
    document.getElementById('ne-lon').value = neMarker.position.lng();
    overlay.bounds_ = new google.maps.LatLngBounds(swMarker.position, neMarker.position);
    overlay.draw();
  }
  google.maps.event.addListener(swMarker,'drag',dragcallback);
  google.maps.event.addListener(neMarker,'drag',dragcallback);
}
// [END region_initialization]

// [START region_constructor]
/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

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

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}
// [END region_constructor]

// [START region_attachment]
/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the 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%';
  img.style.position = 'absolute';
  img.style.opacity = '0.6';
  img.style.filter = 'alpha(opacity=60)';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};
// [END region_attachment]

// [START region_drawing]
USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel 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';
};
// [END region_drawing]

// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};
// [END region_removal]

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

    </script>
  </head>
  <body>
    <div id="info-box">
      <br/>
      <br/>
      <label for="sw-lat">SW Lat</label>
      <input id="sw-lat" name="sw-lat" type="text" value="" readonly="readonly"/><br/>
      <label for="sw-lon">SW Lon</label>
      <input id="sw-lon" name="sw-lon" type="text" value="" readonly="readonly"/><br/>
      <label for="ne-lat">NE Lat</label>
      <input id="ne-lat" name="ne-lat" type="text" value="" readonly="readonly"/><br/>
      <label for="ne-lon">NE Lon</label>
      <input id="ne-lon" name="ne-lon" type="text" value="" readonly="readonly"/>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Adding a Custom Overlay</title>
	<style>
	html, body {
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	#map-canvas {
	height: 100%;
	width: 70%;
	padding: 0px;
	float:left;
	}
	#info-box{
	height: 100%;
	width: 30%;
	float:left;
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
	// [START region_initialization]
	// This example creates a custom overlay called USGSOverlay, containing
	// a U.S. Geological Survey (USGS) image of the relevant area on the map.

	// Set the custom overlay object's prototype to a new instance
	// of OverlayView. In effect, this will subclass the overlay class.
	// Note that we set the prototype to an instance, rather than the
	// parent class itself, because we do not wish to modify the parent class.

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

	var swMarker;
	var neMarker;
	var map;
	// Initialize the map and the custom overlay.

	function initialize() {
	var mapOptions = {
	zoom: 11,
	center: new google.maps.LatLng(62.323907, -150.109291),
	mapTypeId: google.maps.MapTypeId.SATELLITE
	};

	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	var swBound = new google.maps.LatLng(62.281819, -150.287132);
	var neBound = new google.maps.LatLng(62.400471, -150.005608);
	var bounds = new google.maps.LatLngBounds(swBound, neBound);

	// The photograph is courtesy of the U.S. Geological Survey.
	var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
	srcImage += 'examples/full/images/talkeetna.png';

	// The custom USGSOverlay object contains the USGS image,
	// the bounds of the image, and a reference to the map.
	overlay = new USGSOverlay(bounds, srcImage, map);

	// Let's create two markers that will act as holders of the Overlay bounds.
	swMarker = new google.maps.Marker({
	position: swBound,
	map: map, // handle of the map
	draggable:true
	});
	neMarker = new google.maps.Marker({
	position: neBound,
	map: map, // handle of the map
	draggable:true
	});

	//this callback will be called everytime the markers are moved
	// updating the Overlay bounds.
	var dragcallback = function(){
	document.getElementById('sw-lat').value = swMarker.position.lat();
	document.getElementById('sw-lon').value = swMarker.position.lng();
	document.getElementById('ne-lat').value = neMarker.position.lat()
	document.getElementById('ne-lon').value = neMarker.position.lng();
	overlay.bounds_ = new google.maps.LatLngBounds(swMarker.position, neMarker.position);
	overlay.draw();
	}
	google.maps.event.addListener(swMarker,'drag',dragcallback);
	google.maps.event.addListener(neMarker,'drag',dragcallback);
	}
	// [END region_initialization]

	// [START region_constructor]
	/** @constructor */
	function USGSOverlay(bounds, image, map) {

	// Initialize all properties.
	this.bounds_ = bounds;
	this.image_ = image;
	this.map_ = map;

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

	// Explicitly call setMap on this overlay.
	this.setMap(map);
	}
	// [END region_constructor]

	// [START region_attachment]
	/**
	* onAdd is called when the map's panes are ready and the overlay has been
	* added to the map.
	*/
	USGSOverlay.prototype.onAdd = function() {

	var div = document.createElement('div');
	div.style.borderStyle = 'none';
	div.style.borderWidth = '0px';
	div.style.position = 'absolute';

	// Create the 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%';
	img.style.position = 'absolute';
	img.style.opacity = '0.6';
	img.style.filter = 'alpha(opacity=60)';
	div.appendChild(img);

	this.div_ = div;

	// Add the element to the "overlayLayer" pane.
	var panes = this.getPanes();
	panes.overlayLayer.appendChild(div);
	};
	// [END region_attachment]

	// [START region_drawing]
	USGSOverlay.prototype.draw = function() {

	// We use the south-west and north-east
	// coordinates of the overlay to peg it to the correct position and size.
	// To do this, we need to retrieve the projection from the overlay.
	var overlayProjection = this.getProjection();

	// Retrieve the south-west and north-east coordinates of this overlay
	// in LatLngs and convert them to pixel 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';
	};
	// [END region_drawing]

	// [START region_removal]
	// The onRemove() method will be called automatically from the API if
	// we ever set the overlay's map property to 'null'.
	USGSOverlay.prototype.onRemove = function() {
	this.div_.parentNode.removeChild(this.div_);
	this.div_ = null;
	};
	// [END region_removal]

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

	</script>
	</head>
	<body>
	<div id="info-box">
	<br/>
	<br/>
	<label for="sw-lat">SW Lat</label>
	<input id="sw-lat" name="sw-lat" type="text" value="" readonly="readonly"/><br/>
	<label for="sw-lon">SW Lon</label>
	<input id="sw-lon" name="sw-lon" type="text" value="" readonly="readonly"/><br/>
	<label for="ne-lat">NE Lat</label>
	<input id="ne-lat" name="ne-lat" type="text" value="" readonly="readonly"/><br/>
	<label for="ne-lon">NE Lon</label>
	<input id="ne-lon" name="ne-lon" type="text" value="" readonly="readonly"/>
	</div>
	<div id="map-canvas"></div>
	</body>
	</html>