Menampilkan peta menggunakan Google Maps API

Menampilkan peta menggunakan Google Maps API

4366
8
SHARE
google maps api

Dimalam yang sesunyi ini, harviacode akan mencoba menulis tentang bagaimana menampilkan peta dengan menggunakan Google Maps API. Pada kesempatan sebelumnya kita juga pernah menulis tentang bagaimana Menampilkan google map pada halaman HTML. Kali ini cara yang kita gunakan sedikit lebih advance yaitu menggunakan Google Maps API.

Sebelum lebih jauh, kita perlu mengetahui apa sih Google Maps API itu. Google Maps API merupakan salah satu tools yang disediakan oleh google sehingga memungkinkan bagi para developer untuk menampilkan peta dihalaman web maupun di aplikasi mobile. Tidak hanya menampilkan peta, kita juga diijinkan untuk melakukan customisasi pada peta seperti penambahan marker pada peta dan penambahan informasi. Tentu hal ini sangat berguna apabila kita sedang membuat aplikasi yang memiliki peta di dalamnya.

Menampilkan peta menggunakan Google Maps API secara sederhana

Pada contoh berikut kita akan mencoba menampilkan peta secara sederhana menggunakan Google Maps API. Berikut ini adalah langkah langkahnya.

1. Pertama buatlah file index.php, kemudian kita perlu memanggil Google Maps API.
2. Selanjutnya adalah menambahkan properties pada peta yang ingin kita tampilkan. Untuk pilihan properties cukup banyak, namun pada contoh ini kita hanya menggunakan center, zoom dan mapTypeId

Center merupakan titik tengah peta yang ditampilkan, pada contoh ini saya menggunakan bekasi sebagai titik tengah peta.

Zoom digunakan untuk mengatur ukuran zoom peta.

Untuk mapTypeId pilihannya adalah sebagai berikut :
– ROADMAP (peta normal dalam bentuk 2 dimensi)
– SATELLITE (peta dalam bentuk foto satelit)
– HYBRID (peta dalam bentuk foto satelit dilengkapi dengan jalan dan nama kota)
– TERRAIN (peta dalam bentuk gunung, sungai dsb)

3. Membuat div untuk menampilkan peta
4. Membuat Object Peta
5. Menampilkan peta dengan menambahkan listener.

Berikut ini adalah kode index.php beserta dengan catatan langkah langkahnya (sesuai nomor urut langkah langkahnya).

Jalankan file tersebut menggunakan browser maka anda akan mendapatkan tampilan seperti berikut ini.

google maps api

Me load peta secara asynchronous.

Kita juga bisa menampilkan peta setelah seluruh halaman selesai ditampilkan dengan cara mengubah listerner menjadi fungsi berikut ini. (baris 21 s/d 27)

 

Menampilkan banyak peta sekaligus

Kita juga bisa menampilkan banyak peta dengan masing masing properties dalam satu halaman. Berikut ini adalah contohnya

dan ini adalah hasilnya

google maps api

Google mengijinkan kita untuk mengakses peta tersebut ribuan kali perhari. Apa bila kita berencana untuk menggunakan trafic yang lebih besar kita memerlukan Google Maps API Key yang bisa anda dapatkan diĀ  https://console.developers.google.com.

Demikianlah pembahasan singkat mengenai dasar menampilkan peta menggunakan Google Maps API. Pada kesempatan berikutnya kita akan menambahkan customisasi seperti penambahan overlays pada map yaitu marker, polyline, polygon, circle dan informasi windows pada peta.

Semoga bermanfaat, jangan lupa di like dan dishare ya, Terima kasih.

8 COMMENTS

    • itu tinggal copy aja mas. udah bisa langsung jalan. nanti langkah berikutnya penambahan marker dan lain lain tinggal ikutin link di bagian bawah artikel.

  1. ketika saya jalankan, malah keluar “ups! ada yang sesuatu salah. Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya.” itu gimana ya mas?

    • jika mas Rizal menggunakan Firefox, untuk melihat console, tekan tombol F12 pada keyboard. nanti akan muncul jendela console pada layar browser. lalu perhatikan pesan error yang muncul di sana. terima kasih

  2. mas, harus ada javascript dlu kah? pas saya jalankan program itu, malah keluar “Ups! Ada sesuatu yang salah.
    Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya.”

    itu bagaimana ya?

  3. html, body { height: 100%; margin: 0; padding: 0; }
    #map { height: 100%; }

    function initMap() {
    var uluru = {lat: -7.7826, lng: 110.4151};
    var map = new google.maps.Map(document.getElementById(‘map’), {
    zoom: 18,
    center: uluru
    });

    var contentString = ”+
    ”+
    ”+
    ‘Uluru’+
    ”+
    Uluru, also referred to as Ayers Rock, is a large ‘ +
    ‘sandstone rock formation in the southern part of the ‘+
    ‘Northern Territory, central Australia. It lies 335 km (208 mi) ‘+
    ‘south west of the nearest large town, Alice Springs; 450 km ‘+
    ‘(280 mi) by road. Kata Tjuta and Uluru are the two major ‘+
    ‘features of the Uluru – Kata Tjuta National Park. Uluru is ‘+
    ‘sacred to the Pitjantjatjara and Yankunytjatjara, the ‘+
    ‘Aboriginal people of the area. It has many springs, waterholes, ‘+
    ‘rock caves and ancient paintings. Uluru is listed as a World ‘+
    ‘Heritage Site.’+
    ‘Attribution: Uluru, ‘+
    ‘https://en.wikipedia.org/w/index.php?title=Uluru
    ‘+
    ‘(last visited June 22, 2009).’+
    ”+
    ”;

    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });

    var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: ‘Uluru (Ayers Rock)’
    });
    marker.addListener(‘click’, function() {
    infowindow.open(map, marker);
    });
    }

    klo mau menampilkan isi popupnya dari database gimana caranya? terima kasih sebelumnya

LEAVE A REPLY