Skip to content

Instantly share code, notes, and snippets.

@SaneMethod
Created February 21, 2014 19:20
Show Gist options
  • Save SaneMethod/9141404 to your computer and use it in GitHub Desktop.
Save SaneMethod/9141404 to your computer and use it in GitHub Desktop.
Custom google maps info window, no jquery. See also http://www.artandlogic.com/blog/2014/02/custom-google-maps-info-windows for details.
/**
* Create a custom overlay for our window marker display, extending google.maps.OverlayView.
* This is somewhat complicated by needing to async load the google.maps api first - thus, we
* wrap CustomWindow into a closure, and when instantiating CustomNativeWindow, we first execute the closure
* (to create our CustomNativeWindow function, now properly extending the newly loaded google.maps.OverlayView),
* and then instantiate said function.
* @type {Function}
* @see _mapView.onRender
*/
(function(){
var CustomWindow = function(){
this.container = document.createElement('div');
this.container.classList.add('map-info-window');
this.layer = null;
this.marker = null;
this.position = null;
};
/**
* Inherit from OverlayView
* @type {google.maps.OverlayView}
*/
CustomWindow.prototype = new google.maps.OverlayView();
/**
* Called when this overlay is set to a map via this.setMap. Get the appropriate map pane
* to add the window to, append the container, bind to close element.
* @see CustomWindow.open
*/
CustomWindow.prototype.onAdd = function(){
this.layer = this.getPanes().floatPane;
this.layer.appendChild(this.container);
this.container.getElementsByClassName('map-info-close')[0].addEventListener('click', function(){
// Close info window on click
this.close();
}.bind(this), false);
};
/**
* Called after onAdd, and every time the map is moved, zoomed, or anything else that
* would effect positions, to redraw this overlay.
*/
CustomWindow.prototype.draw = function(){
var markerIcon = this.marker.getIcon(),
cBounds = this.container.getBoundingClientRect(),
cHeight = cBounds.height + markerIcon.scaledSize.height + 10,
cWidth = cBounds.width / 2;
this.position = this.getProjection().fromLatLngToDivPixel(this.marker.getPosition());
this.container.style.top = this.position.y - cHeight+'px';
this.container.style.left = this.position.x - cWidth+'px';
};
/**
* Called when this overlay has its map set to null.
* @see CustomWindow.close
*/
CustomWindow.prototype.onRemove = function(){
this.layer.removeChild(this.container);
};
/**
* Sets the contents of this overlay.
* @param {string} html
*/
CustomWindow.prototype.setContent = function(html){
this.container.innerHTML = html;
};
/**
* Sets the map and relevant marker for this overlay.
* @param {google.maps.Map} map
* @param {google.maps.Marker} marker
*/
CustomWindow.prototype.open = function(map, marker){
this.marker = marker;
this.setMap(map);
};
/**
* Close this overlay by setting its map to null.
*/
CustomWindow.prototype.close = function(){
this.setMap(null);
};
return CustomWindow;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment