Google Maps v3 Projector

google-maps-projector-demo.js

(function($) {

	/**
	 * Instantiates a new Map for the specified container.
	 * 
	 * @param {String} selector The jQuery selector to target.
	 * @param {Object} options The Google Maps options.
	 * @param {String} uri The URI to load Properties from.
	 * 
	 * @constructor
	 */
	function Map(selector, options, uri) {
		this.element = $(selector)

		this.options = options || {
			center : new google.maps.LatLng(39.8282, -98.5795),
			mapTypeControl : false,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			maxZoom : 12,
			minZoom : 4,
			navigationControl : true,
			panControlOptions : {
				position : google.maps.ControlPosition.RIGHT_CENTER
			},
			scaleControl : true,
			scrollwheel : false,
			streetViewControl : false,
			zoom : 4,
			zoomControlOptions : {
				position : google.maps.ControlPosition.RIGHT_CENTER
			}
		}

		this.gmap = new google.maps.Map(this.element, this.options)

		this.projector = new google.maps.Projector(this.gmap)
	}

	/**
	 * Adds the specified target element to this Map. You can modify this to accept
	 * any custom type (i.e. not jQuery), so long as the custom type can provide
	 * a jQuery instance to the Projector.
	 * 
	 * @param {jQuery} The element to project onto the Map.
	 * @param {google.maps.LatLng} The LatLng.
	 * @param {object} offset The pixel offset
	 */
	Map.prototype.add = function(target, latLng, offset) {
		this.projector.add(target, latLng, offset)
	}

	/**
	 * Instantiate the Map.
	 */
	$(document).ready(function() {
		window.myMap = new Map('#map')
	})

})(jQuery)

google-maps-projector.js

(function($) {

	/**
	 * Instantiates a new Projector for placing arbitrary content over a Map.
	 * 
	 * @param {google.maps.Map} map The Map.
	 * 
	 * @constructor
	 * @augments {google.maps.OverlayView}
	 */
	function Projector(map) {

		this.setMap(map)

		this.targets = []

		var update = this.update.bind(this)

		google.maps.event.addListener(map, 'bounds_changed', update)
		google.maps.event.addListener(map, 'center_changed', update)
		google.maps.event.addListener(map, 'zoom_changed', update)
	}

	Projector.prototype = new google.maps.OverlayView()

	Projector.prototype.draw = Projector.prototype.onAdd = Projector.prototype.onRemove = $.noop

	/**
	 * Adds the specified target at the given position and offset.
	 * 
	 * @param {jQuery} target The element to be projected.
 	 * @param {maps.google.LatLng} latLng The LatLng (optional).
  	 * @param {object} The offset, in pixels (optional).
	 */
	Projector.prototype.add = function(target, latLng, offset) {

		target.latLng = latLng || new google.maps.LatLng(0, 0)

		target.offset = offset || {
			x : 0,
			y : 0
		}

		this.targets.push(target)
	}

	/**
	 * Projects the specified target to its current position.
	 * 
	 * @param {jQuery} target The target to project.
	 */
	Projector.prototype.project = function(target) {

		var point = this.getProjection().fromLatLngToContainerPixel(target.latLng)

		target.css({
			left : point.x - target.width() / 2 + target.offset.x,
			top : point.y + -target.height() + target.offset.y
		})
	}

	/**
	 * Updates all projection targets to their current positions.
	 */
	Projector.prototype.update = function() {

		for ( var i = 0; i < this.targets.length; i++) {
			this.project(this.targets[i])
		}
	}

	google.maps.Projector = Projector

})(jQuery)