JavaScript
CoffeeScript
GoogleMapsAPI
gmaps.js
More than 3 years have passed since last update.

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

http://hpneo.github.io/gmaps/

シンプルな使い方の場合は悩むこともなく使えるんだけど、

ちょっと凝ったことをやろうとしたらサンプルを見るだけではわからない事が多々あったので色々使い方を紹介。


マップの初期化

・マップのタイプを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)