LatLng/Pixel Coordinate Custom Control

latlngcontrol.coffee

class LatLngControl extends google.maps.OverlayView
  constructor: (map) ->
    @ANCHOR_OFFSET_ = new google.maps.Point 8, 8
    @node_ = @createHtmlNode_()
    map.controls[google.maps.ControlPosition.TOP].push @node_
    @setMap map
    @set 'visible', false

  draw: ->

  createHtmlNode_: ->
    doc_ = window.document
    divNode = doc_.createElement 'div'
    divNode.id = 'latlng-control'
    divNode.index = 100

    return divNode

  visible_changed: ->
    @node_.style.display = if @get 'visible' then '' else 'none'

  updatePosition: (latLng) ->
    projection = @getProjection()
    point = projection.fromLatLngToContainerPixel latLng

    @node_.style.left = point.x + @.ANCHOR_OFFSET_.x + 'px'
    @node_.style.top  = point.y + @.ANCHOR_OFFSET_.y + 'px'

    @.node_.innerHTML = [
      latLng.toUrlValue 4,
      '<br/>',
      point.x,
      'px, ',
      point.y,
      'px'
    ].join ''