Safril


 
August 30, 2017
 Posted by Safril
0

Menampilkan google maps menggunakan web component (Polymer)

Dalam sebuah website saat ini, menampilkan maps sudah menjadi kebutuhan tersendiri dalam keabsahan dari website tersebut. Salah satu API untuk menampilkan maps adalah Google Maps. Pada artikel ini saya akan membahas tentang cara menampilkan Google Maps menggunakan Framework Polymer. Pada artikel ini saya langsung menuju kepada inti pembahasan.

Pertama kita import bower component untuk google map, dan google maps api

<link rel="import" href="../../../bower_components/google-map/google-map.html">
<link rel="import" href="../../../bower_components/google-apis/google-maps-api.html">

Jika tidak ada pada folder bower_components bisa didownload terlebih dulu melalui command prompt, atau bisa dilihat di sini.

bower install --save GoogleWebComponents/google-map

Setelah itu kita bisa input komponen <google-maps> didalam template

<google-map
    id="googleMap"
    map="{{map}}"
    latitude="-0.946049" 
    longitude="116.687887" 
    zoom="5" 
    api-key="Your Key">
</google-map>

Latitude dan longitude bisa diubah sesuai keinginan, di sini saya menggunakan latitude dan longitude untuk menampilkan peta indonesia. Api-key digunakan untuk mengakses google maps api, jika anda belum memilikinya bisa dibuat terlebih dulu di sini.

Berikut adalah script lengkap yang telah saya buat untuk menampilkan google maps:

<link rel="import" href="../../../bower_components/google-map/google-map.html">
<link rel="import" href="../../../bower_components/google-apis/google-maps-api.html">

<dom-module id="maps-page">
    <template>
        <style is="custom-style">

            .vertical {
              @apply(--layout-vertical);
              width: 100%;
            }

            .horizontal {
              @apply(--layout-horizontal);
              width: 100%;
            }

            paper-card {
              position: absolute;
              bottom: 25px;
              left: 25px;
              z-index: 1;
            }
        </style>

        <div class="horizontal">
            <div style="width:300px; height:200px">
                <paper-scroll-header-panel class="flex">
                    <paper-input 
                        id="searchInput" 
                        label="search" 
                        value="{{searchInput}}" 
                        style="margin-left: 20px; width: 220px">
                    </paper-input>
                </paper-scroll-header-panel>
            </div>
            <div style="width:100%; height:450px">
                <div class="vertical" style="width:100%; height:460px">
                    <div style="width:100%; height:98%">
                        <google-maps-api 
                            id="googleApi" 
                            api-key="your-key" 
                            version="3.exp">        
                        </google-maps-api>
 
                        <google-map
                            id="googleMap"
                            map="{{map}}"
                            latitude="-0.946049" 
                            longitude="116.687887" 
                            zoom="5" 
                            api-key="your-key">
                        </google-map>
                    </div>
                </div>  
            </div>
        </div>
    </template>
    <script>
        (function() {
            'use strict';
            Polymer({
                is: 'maps-page',
                properties: {
                    map: {type: Object, notify: true},
                },
                observers: [],
                ready: function(){
                }
            });
        })();
    </script>
</dom-module>

Hasil :

Untitled

Leave a comment

Please wait...