Lihat konsol javascript untuk mengetahui detail teknisnya

Question

Bahkan tidak hanya peta, Google Maps juga menyediakan Citra dari beberapa lokasi bangunan, jalan, dan lain-lain.

Table of Contents Show

Apa itu Google Maps API?
Menampilkan Peta Google Maps di Web
Apa Selanjutnya?
Apa itu Google Maps API Key?
Mengapa kita memerlukan API key saat akan menggunakan peta dalam aplikasi Android?

Apa itu Google Maps API?

Google Menyediakan Google Maps API yang memungkinkan kita membangun aplikasi dengan memanfaatkan Google Maps.

Google Maps API (Application Programming Interface) merupakan sebuah API yang disediakan oleh Google untuk menggunakan peta Google (Google Map) dalam aplikasi yang kita bangun. Google Maps API memungkinkan kita memodifikasi peta dan informasi yang ada di dalamnya.

Google Maps API tersedia untuk platform:

Web adalah Google Maps API yang digunakan pada Web.
Android adalah Google Maps API yang digunakan pada aplikasi Android.
iOS adalah Google Maps API yang digunakan pada aplikasi iOS.
Web Service adalah penggunaan Google Maps melalui Web Service.

Pada kesempatan ini kita akan menggunakan Google Maps API untuk Web.

Menampilkan Peta Google Maps di Web

Ada beberapa langkah yang harus kita lakukan untuk menampilkan peta Google Maps di dalam Web:

Menyisipkan library Google Map di dalam tag

function initialize() { … }

2 atau di dalam

function initialize() { … }

3.

<script src="http://maps.googleapis.com/maps/api/js"></script>

Membuat fungsi

function initialize() { … }

4 untuk menyiapkan peta:

function initialize() { … }

Membuat properti yang dibutuhkan peta

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

Properti ini ditulis di dalam fungsi

function initialize() { … }

4.

Membuat Objek Peta

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

Menambahkan fungsi

function initialize() { … }

4 ke dalam event window load agar dipanggil saat web dibuka

google.maps.event.addDomListener(window, 'load', initialize);

Membuat tag

function initialize() { … }

7 sebagai kontainer untuk menampilkan peta.

<div id="googleMap" style="width:100%;height:380px;"></div>

Sehingga kode lengkapnya akan menjadi seperti ini:

                        };           }             

an><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Tutorial Google Map - Petani Kode</title> <!-- Menyisipkan library Google Maps --> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> // fungsi initialize untuk mempersiapkan peta function initialize() { var propertiPeta = { center:new google.maps.LatLng(-8.5830695,116.3202515), zoom:9, mapTypeId:google.maps.MapTypeId.ROADMAP var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta); // event jendela di-load google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <!-- Elemen yang akan menjadi kontainer peta --> <div id="googleMap" style="width:100%;height:380px;"></div> </body> </html>

Hasilnya: https://codepen.io/ardianta/pen/ZjrJeN

See the Pen Menampilkan Peta Google Maps by Ardianta Pargo (@ardianta) on CodePen.

Mudah bukan?

Mari kita bahas lebih dalam…

Pertama dimulai dari menyisipkan library Google Maps:

<script src="http://maps.googleapis.com/maps/api/js"></script>

Library ini bisa disisipkan di dalam tag

function initialize() { … }

2 maupun

function initialize() { … }

3. Yang penting library ini disisipkan pertama kali sebelum skrip

function initialize() { … }

4.

Penysipan library Google Mpas kadang juga membutuhkan API Key untuk lingkungan production.

Cara Membuat API Key Google Maps bisa di baca di: Cara Membuat API Key Google Maps

Berkutnya kita membuat fungsi

function initialize() { … }

4 yang bertujuan untuk menyiapkan peta.

Di dalam fungsi

function initialize() { … }

4 terdapat definisi properti yang dibutuhkan peta.

var propertiPeta = {
    center: new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

Ada tiga properti yang kita berikan:

```
var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
```
3 adalah properti untuk mengatur posisi tengah Google Map saat pertama kali ditampilkan. Pada contoh di atas saya memberikan nilai koordinat untuk Pulau Lombok sebagai koordinat nilai tengahnya.

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

4 adalah tingkat skala Google Maps. Sebagai acuan, berikut ini tingkat sekala yang biasanya digunakan:

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

5: Bumi (smua peta ditampilkan)

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

6: Peta Dunia

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

7: Landmass/continent

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

8: Kota

var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

9: Jalan

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

0: Bangunan

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

1 adalah tipe Google Map yang akan digunakan. Pada Contoh di atas, kita menggunakan

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

2. Selain

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

2 ada juga

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

4,

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

5, dan

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

6.

Setelah itu kita membuat objek peta berdasarkan properti tersebut:

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

Perhatikan di asana kita menyatakan untuk menggunakan elemen dengan ID

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

7. Berarti nanti kita harus membuat elemen HTML dengan ID

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

7.

Lalu berikutnya kita mendaftarkan fungsi

function initialize() { … }

4 ke dalam event window load agar dieksekusi saat halaman web dibuka.

google.maps.event.addDomListener(window, 'load', initialize);

Terakhir membuat elemen HTML dengan ID

var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);

7:

<div id="googleMap" style="width:100%;height:380px;"></div>

Perlu diperhatikan:

Elemen ini harus memiliki tinggi dan Lebar. Pada contoh di atas kita memberikan tinggi

google.maps.event.addDomListener(window, 'load', initialize);

1 dan lebarnya

google.maps.event.addDomListener(window, 'load', initialize);

2 dari layar.

Apa Selanjutnya?

Kita sudah berhasil menampilkan peta ke dalam halaman web. Selanjutnya coba lakukan eksperimen dengan mengubah properti petanya seperti:

Mengubah koordinat
Mengubah type peta
dsb.

Setelah merasa cukup puas, kamu bisa lanjut belajar tentang cara menggunakan marker pada Google Maps.

Apa itu Google Maps API Key?

Kunci API adalah ID unik yang mengautentikasi permintaan terkait project untuk tujuan penggunaan dan penagihan. Anda harus memiliki setidaknya satu kunci API terkait project. If playback doesn't begin shortly, try restarting your device.

Mengapa kita memerlukan API key saat akan menggunakan peta dalam aplikasi Android?

Kunci API diperlukan untuk aplikasi dan project yang menggunakan API dan SDK Google Maps Platform. Dokumen ini mengidentifikasi tujuan penggunaan kunci API, cara melindunginya seperti yang Anda lakukan untuk kredensial lainnya, dan pembatasan yang sesuai untuk project Anda.

kode javascript