Polymer0.5でGoogleWebComponentsのGoogleMapを使う覚書

PolymerとGoogleWebComponentsを使えばJavaScriptをほとんど書かずとも、GoogleMapが使えるのです。

なんでPolymer0.5なの？

その時に書いた記事がそのまま残っててもったいないからアップしただけですよ。ええ。

GoogleWebComponentsの導入

何はともかくGoogleWebComponentsをダウンロードします。bowerでちゃっちゃと取得してしまうか、zipでDLして手動で動かすかのどちらかでしょう。

→GoogleWebComponents/google-map

ちなみにGoogleMap機能を使用するには、GoogleWebComponents/google-apisも必要となりますのでこちらもダウンロードしておきましょう。

Polymerで使う

今回はPolymerで使うので、任意のディレクトリに配置してimportします。

[html]
<!– Add Custom Components –>
<link rel="import" href="../../bower_components/google-map/google-map.html">
[/html]

そしてMAPを表示させたい場所で以下のようなタグを書けばOK。

[html]
<google-map
style="height:500px"
zoom="15" map="{{map}}"
latitude="37.779" longitude="-122.3892">
</google-map>
[/html]

CSSで高さを設定してやる必要がありますが、一切JavaScriptを書かずとも良い素敵仕様です。

現在位置も取得してみよう

せっかくなので現在位置を取得して、ルートガイドを表示させみましょう。

現在位置を取得するためのWebComponentsも「CustomeElements.io」をで検索すると複数出てきます。

今回はもっともSTARのあつまっている「ebidel/geo-location」を使いましょう。

こちらもGitHubからファイルを一式DLして、importさせます。

[html]
<!– Add Custom Components –>
<link rel="import" href="../../bower_components/google-map/google-map.html">
<link rel="import" href="../../bower_components/geo-location/geo-location.html">
[/html]

あとは実際に表示させたい場所にコードを追加します。

[html]
<google-map latitude="{{nowLat}}" longitude="{{nowLong}}" zoom="15" map="{{map}}" fitToMarkers>
<google-map-marker latitude="{{nowLat}}" longitude="{{nowLong}}"></google-map-marker>
</google-map>
<geo-location latitude="{{nowLat}}" longitude="{{nowLong}}"></geo-location>
[/html]

注意

外部のデータをbindさせて表示させる際などにnumber以外の型で値を渡してしまうことがありますが、一発でエラーになるので要注意です。