Safril


 
August 30, 2017
 Posted by Safril
0

Menampilkan Direction google maps menggunakan web component (Polymer)

Pada artikel sebelumnya saya sudah membahas tentang bagaimana cara menampilkan google maps pada web component polymer. Saat ini saya akan membahas tentang bagaimana caranya membuat Direction pada google maps menggunakan polymer.

Pertama kita import bower component untuk google map direction.

<link rel="import" href="../../../bower_components/google-map/google-map-directions.html">

Jika tidak terdapat pada folder bower_components bisa di-download terlebih dulu melalui command prompt, atau bisa dilihat di sini.

Setelah itu kita bisa input komponen <google-map-direction> ke dalam template:

<google-map-directions
    map="{{map}}"
    id="googleMapDirections"
    start-address="{{start}}"
    end-address="{{end}}"
    api-key="AIzaSyAteSWxlPWeCU4Np3pRACr-w2l8FqSHTe8"
    renderer-options='{"draggable":true, "polylineOptions":{"draggable":true, "strokeColor":"#FF0000"}}'
    travel-mode="[[travelMode]]"
    >
</google-map-directions>

Dikarenakan kita membutuhkan input start address dan end address, maka kita perlu membuat sebuah form untuk memfasilitasi hal tersebut.

<paper-card id="divDirection" style="visibility:hidden; margin-left: 230px; margin-bottom: 60px">
    <paper-icon-item>
        <iron-icon icon="search" item-icon></iron-icon>
        <paper-input label="Start address" value="{{start}}"></paper-input>
    </paper-icon-item>

    <paper-icon-item>
        <iron-icon icon="search" item-icon></iron-icon>
        <paper-input label="End address" value="{{end}}"></paper-input>
    </paper-icon-item>

    <paper-tabs selected="{{travelMode}}" attr-for-selected="label">
        <paper-tab label="DRIVING">
            <iron-icon icon="maps:directions-car"></iron-icon>
            <span>DRIVING</span>
        </paper-tab>
        <paper-tab label="WALKING">
            <iron-icon icon="maps:directions-walk"></iron-icon>
            <span>WALKING</span>
        </paper-tab>
        <paper-tab label="BICYCLING">
            <iron-icon icon="maps:directions-bike"></iron-icon>
            <span>BICYCLING</span>
        </paper-tab>
        <paper-tab label="TRANSIT">
            <iron-icon icon="maps:directions-transit"></iron-icon>
            <span>TRANSIT</span>
        </paper-tab>
    </paper-tabs>
</paper-card>

Maka kita telah berhasil membuat google maps direction pada aplikasi polymer kita :).

google-maps-direction

Leave a comment

Please wait...