gmaps.jsの細かいノウハウ

gmaps.js という、GoogleMapsAPIを使うのがちょっと楽になるライブラリがある。

シンプルな使い方の場合は悩むこともなく使えるんだけど、
ちょっと凝ったことをやろうとしたらサンプルを見るだけではわからない事が多々あったので色々使い方を紹介。

マップの初期化

・マップのタイプをHybridに変更する
・マップのコントロールを非表示にする（ただしズームだけは表示する）

map = new GMaps
    div: '#beacons-map'
    lat: 35.672370
    lng: 139.736538
    zoom: 13
    mapType: "HYBRID"
    disableDefaultUI: true
    zoomControl: true

map.map というのがGoogleMapsのオブジェクトになる。

スタイル付き地図（Styled Maps）をHybrid地図に適用してPOIを消す

ふつうにGoogleMapsを表示すると、お店とか学校とか病院のアイコンが表示されてしまって、誤クリックして開いてしまうことがあるので消したい場合に必要。

Hybrid地図じゃない場合は、初期化するときにいきなりオプションを渡せば適用できるんだけど、Hybridの場合は生成後にsetOptionsしないとだめだった。

google.maps.event.addListener map.map, 'maptypeid_changed', ->
    @setOptions
        styles:[{
            featureType: "poi",
            elementType: "all",
            stylers: [{visibility:"off"}]
        }]
google.maps.event.trigger(map.map,'maptypeid_changed')

静止画を地図として重ねて表示する

すごいめんどくさかった…。

まず、こういうクラスが必要らしいので用意しておく。
なんかもうちょっと短くかける気もするんだけど、
これはGoogleMapsのドキュメントにあったやつをCoffeescriptで書きなおしただけのもの。

class MyMapOverlay extends google.maps.OverlayView
    constructor: (bounds, image, map)->
        @bounds_ = bounds
        @image_ = image
        @map_ = map
        @div_ = null
        @setMap(map)
    onAdd: ->
        div = document.createElement('div')
        div.style.border = "none"
        div.style.borderWidth = "0px"
        div.style.position = "absolute"
        img = document.createElement("img")
        img.src = @image_
        img.style.width = "100%"
        img.style.height = "100%"
        img.style.opacity = "0.5"
        div.appendChild(img)
        @div_ = div
        panes = @getPanes()
        panes.overlayLayer.appendChild(div)
    onRemove: ->
        @div_.parentNode.removeChild(@div_)
        @div_ = null
    draw: ->
        overlayProjection = @getProjection()
        sw = overlayProjection.fromLatLngToDivPixel(@bounds_.getSouthWest())
        ne = overlayProjection.fromLatLngToDivPixel(@bounds_.getNorthEast())
        div = @div_
        div.style.left = sw.x + 'px'
        div.style.top = ne.y + 'px'
        div.style.width = (ne.x - sw.x) + 'px'
        div.style.height = (sw.y - ne.y) + 'px'

そしてこのクラスを使う

swBound = new google.maps.LatLng(35.603426, 139.632645)
neBound = new google.maps.LatLng(35.727523, 139.864241)
bounds = new google.maps.LatLngBounds(swBound, neBound)
map_img = "/my_map.png"
overlay = new MyMapOverlay(bounds, map_img, map.map)