bindingHandlerでGoogleMap を表示する

とりあえず使わなくなったんだけどそのうち使えそうなので自分用にメモ。 諸々の前提条件は省く。

使い方

<div data-bind="locationMap: location"></div>という要素を入れ、location = { latitude: xxx, longitude: yyy }というオブジェクトを入れておくとそこに地図を表示する。

ko.bindingHandlers.locationMap = {
  init: (element, valueAccessor, allBindings, viewModel, bindingContext) ->
    location = ko.unwrap(valueAccessor())
    mapCenter = new google.maps.LatLng(location.latitude, location.longitude)
    mapOptions = {
      streetViewControl: false,
      center: mapCenter,
      zoom: 16,
      mapTypeControl: false,
      zoomControl: false,
      scaleControl: false,
      panControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(element, mapOptions)
    map.setOptions({ styles: map_styles_subtle_grayscale }) # set map's color theme
    marker = new google.maps.Marker({ position: mapCenter, map: map }) #, icon: icon })

    google.maps.event.addListenerOnce(map, 'idle', ->
      # do something only the first time the map is loaded
      setTimeout( ->
        html2canvas($(element),
          {
            logging: true
            useCORS: true,
          }).then((canvas) ->
            img = new Image()
            img.onload = ->
              img.onload = null
              #document.body.appendChild(img)
              element.appendChild(img)
              element.style.position = 'relative'
            img.onerror = ->
              img.onerror = null
              window.console.log("Not loaded image from canvas.toDataURL")
            img.src = canvas.toDataURL("image/png")
            dataUrl = canvas.toDataURL('image/png')
            image_elem = $("<img src=\"#{dataUrl}\" />")
            $(element).empty()
            #$(element).append(image_elem) #canvas)
          )
      , 1000)
    )

    return
}