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

PolymerとGoogleWebComponentsを使えばJavaScriptをほとんど書かずとも、GoogleMapが使えるのです。 なんでPolymer0.5なの? その時に書いた記事がそのまま残っててもったいな […]

広告ここから
広告ここまで

目次

    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」をで検索すると複数出てきます。

    Custom_Elements_-_A_Web_Components_Gallery_for_Modern_Web_Apps

    今回はもっとも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以外の型で値を渡してしまうことがありますが、一発でエラーになるので要注意です。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark