Cara Menambahkan Peta Google ke Halaman Web Dengan API

Artikel ini menjelaskan cara menyisipkan peta Google dengan penanda lokasi ke halaman web Anda. Proses ini termasuk mendapatkan kunci perangkat lunak khusus dari Google dan kemudian menambahkan JavaScript yang relevan ke halaman.

Dapatkan Kunci Google Maps API

Untuk melindungi servernya agar tidak dibombardir oleh permintaan peta dan pencarian lokasi, Google membatasi akses ke database Maps-nya. Anda harus mendaftar ke Google sebagai pengembang untuk mendapatkan kunci unik guna menggunakan Antarmuka Pemrograman Aplikasi untuk meminta data dari server Maps. Kunci API gratis kecuali Anda memerlukan akses tugas berat ke server Google (misalnya, untuk mengembangkan aplikasi web).

Untuk mendaftarkan kunci API Anda:

1. Pergi ke Konsol Google Cloud Platform dan, setelah masuk dengan akun Google Anda, buat proyek baru atau pilih yang sudah ada.

2. Klik Terus untuk mengaktifkan API dan layanan terkait apa pun.

3. pada Kredensial halaman, dapatkan Kunci API. Jika perlu, tetapkan batasan yang relevan pada kunci.

4. Amankan kunci API Anda menggunakan praktik terbaik direkomendasikan oleh Google.

Masukkan JavaScript Ke Halaman Web Anda

Masukkan kode berikut ke halaman Web Anda, di bagian BODY dokumen HTML:

// Inisialisasi dan tambahkan fungsi peta initMap() {
// Lokasi flag var flag = {lat: XXX, lng: YYY};
// Peta, berpusat di flag var map = new google.maps. Peta( document.getElementById('map'), {zoom: 4, center: flag});
// Penanda, diposisikan di flag var marker = new google.maps. Marker({posisi: bendera, peta: peta}); } src=" https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap">

Dalam kode ini, ubah yang berikut:

• Menggantikan bendera dengan nama yang merujuk ke lokasi yang Anda sematkan. Tetap sederhana dan singkat (seperti rumah atau kantor atau Paris atau detroit). Anda dapat menjalankan kode ini keluar bendera apa adanya, tetapi mengubah nama mendukung penggunaan kembali kode ini pada halaman yang sama, untuk menyematkan beberapa peta yang berbeda.
• Menggantikan XXX dan YYY dengan garis lintang dan bujur, dalam desimal, dari lokasi penanda peta. Anda harus mengganti nilai ini agar peta dapat ditampilkan dengan benar. Cara mudah untuk menemukan garis lintang dan garis bujur adalah dengan membuka Google Maps dan klik kanan pada lokasi tepat yang ingin Anda tandai. Di menu konteks, pilih Apa disini? untuk melihat garis lintang dan garis bujur.
• Menggantikan KUNCI_API_MU dengan kunci API yang Anda peroleh dari Google. Jangan beri spasi di antara tanda sama dengan dan ampersand. Tanpa kunci, kueri akan gagal dan peta tidak akan ditampilkan dengan benar.

Praktik Optimal

Di bagian atas dokumen HTML Anda, tentukan batasan CSS untuk peta, termasuk ukuran, warna, dan penempatan halaman.

Skrip peta Google berisi atribut seperti Perbesar dan pusat yang terbuka untuk modifikasi pengguna akhir. Teknik yang lebih canggih ini didukung melalui dokumentasi pengembang Google.

Google Maps API adalah aset berharga. Petunjuk praktik terbaik Google menawarkan saran yang sangat baik untuk mengamankan kunci dari penyalahgunaan oleh orang lain. Keamanan yang tepat sangat relevan jika Anda telah menyiapkan sistem pembayaran untuk akses API, karena Anda dapat menghadapi tagihan besar jika kredensial Anda dicuri. Secara khusus, contoh yang kami tunjukkan di sini melakukan menyematkan kunci API langsung ke dalam kode—kami telah melakukan ini untuk tujuan mendemonstrasikan prosedurnya. Namun, dalam lingkungan produksi, lebih baik menentukan variabel lingkungan untuk kunci daripada memasukkan kunci secara langsung.