Created
May 30, 2018 14:01
-
-
Save tagliala/f3b4b80c1eef8533e18bf07e924285fb to your computer and use it in GitHub Desktop.
Google Maps popup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
definePopupClass = -> | |
###* | |
# A customized popup on the map. | |
# @param {!google.maps.LatLng} position | |
# @param {!Element} content | |
# @constructor | |
# @extends {google.maps.OverlayView} | |
### | |
class Popup | |
# NOTE: google.maps.OverlayView is only defined once the Maps API has | |
# loaded. That is why Popup is defined inside initMap(). | |
@::= Object.create(google.maps.OverlayView.prototype) | |
constructor: (position, content) -> | |
@position = position | |
content.classList.add 'popup-bubble-content' | |
pixelOffset = document.createElement('div') | |
pixelOffset.classList.add 'popup-bubble-anchor' | |
pixelOffset.appendChild content | |
@anchor = document.createElement('div') | |
@anchor.classList.add 'popup-tip-anchor' | |
@anchor.appendChild pixelOffset | |
# Optionally stop clicks, etc., from bubbling up to the map. | |
@stopEventPropagation() | |
###* Called when the popup is added to the map. ### | |
onAdd: -> | |
@getPanes().floatPane.appendChild @anchor | |
###* Called when the popup is removed from the map. ### | |
onRemove: -> | |
if @anchor.parentElement | |
@anchor.parentElement.removeChild @anchor | |
###* Called when the popup needs to draw itself. ### | |
draw: -> | |
divPosition = @getProjection().fromLatLngToDivPixel(@position) | |
# Hide the popup when it is far out of view. | |
display = if Math.abs(divPosition.x) < 4000 and Math.abs(divPosition.y) < 4000 then 'block' else 'none' | |
if display == 'block' | |
@anchor.style.left = divPosition.x + 'px' | |
@anchor.style.top = divPosition.y + 'px' | |
if @anchor.style.display != display | |
@anchor.style.display = display | |
###* Stops clicks/drags from bubbling up to the map. ### | |
stopEventPropagation: -> | |
anchor = @anchor | |
anchor.style.cursor = 'auto' | |
[ | |
'click' | |
'dblclick' | |
'contextmenu' | |
'wheel' | |
'mousedown' | |
'touchstart' | |
'pointerdown' | |
].forEach (event) -> | |
anchor.addEventListener event, (e) -> | |
e.stopPropagation() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment