01 05
Dapatkan Kunci Google Maps API untuk Situs Anda
Cara terbaik untuk menambahkan peta Google ke situs web Anda adalah dengan menggunakan Google Maps API. Dan Google menyarankan agar Anda mendapatkan kunci API untuk menggunakan peta.
Anda tidak diharuskan untuk mendapatkan kunci API untuk menggunakan Google Maps API v3, tetapi ini sangat berguna karena memungkinkan Anda memantau penggunaan Anda dan membayar untuk akses tambahan. Google Maps API v3 memiliki kuota 1 permintaan per detik per pengguna hingga maksimum 25.000 permintaan per hari. Jika halaman Anda melebihi batas itu, Anda harus mengaktifkan penagihan untuk mendapatkan lebih banyak.
Cara mendapatkan Kunci API Google Maps
- Login ke Google menggunakan akun Google Anda.
- Buka Konsol Pengembang
- Gulir daftar dan temukan Google Maps API v3, lalu klik tombol "OFF" untuk menyalakannya.
- Baca dan setujui persyaratannya.
- Buka konsol API dan pilih "Akses API" dari menu sebelah kiri
- Di bagian "Akses API Sederhana", klik tombol "Buat kunci Server baru ...".
- Masukkan alamat IP server web Anda. Ini adalah IP tempat permintaan Peta Anda berasal. Jika Anda tidak tahu alamat IP Anda, Anda dapat mencarinya.
- Salin teks pada baris "Kunci API:" (tidak termasuk judul itu). Ini adalah kunci API Anda untuk peta Anda.
02 dari 05
Ubah Alamat Anda menjadi Koordinat
Untuk menggunakan Google Maps di halaman web Anda, Anda perlu memiliki garis lintang dan bujur untuk lokasi tersebut. Anda bisa mendapatkannya dari GPS atau Anda dapat menggunakan alat online seperti Geocoder.us untuk memberi tahu Anda.
- Pergi ke Geocoder.us dan ketik alamat Anda di kotak pencarian.
- Salin nomor pertama untuk garis lintang (tanpa huruf di depan) dan tempelkan ke file teks. Anda tidak memerlukan indikator derajat (ยบ).
- Salin nomor pertama untuk garis bujur (lagi tanpa huruf di depan) dan tempelkan ke file teks Anda.
Garis lintang dan bujur Anda akan terlihat seperti ini:
40.756076
-73.990838
Geocoder.us hanya berfungsi untuk alamat AS, jika Anda perlu mendapatkan koordinat di negara lain, Anda harus mencari alat serupa di wilayah Anda.
03 dari 05
Menambahkan Peta ke Halaman Web Anda
Pertama, Tambahkan Skrip Peta ke
Dokumen Anda
Buka halaman web Anda dan tambahkan yang berikut ini ke KEPALA dokumen Anda.
Ubah bagian yang disorot ke nomor lintang dan bujur yang Anda tulis pada langkah kedua.
Kedua, Tambahkan Elemen Peta ke Halaman Anda
Setelah Anda memiliki semua elemen skrip ditambahkan ke HEAD dari dokumen Anda, Anda perlu memposisikan peta Anda pada halaman. Anda melakukan ini dengan menambahkan elemen DIV dengan atribut id = "map-canvas". Saya sarankan Anda juga memberi style div ini dengan lebar dan tinggi yang akan cocok pada halaman Anda:
Akhirnya, Unggah dan Uji
Hal terakhir yang harus dilakukan adalah mengunggah halaman Anda dan menguji apakah peta Anda ditampilkan. Berikut ini contoh peta Google di halaman. Perhatikan, karena cara kerja CMS About.com, Anda harus mengeklik tautan untuk memunculkan peta. Ini tidak akan terjadi pada halaman Anda.
Jika peta Anda tidak muncul, coba lakukan inisialisasi dengan atribut BODY:
onload = "menginisialisasi ()" >
Hal-hal lain untuk memeriksa apakah peta Anda tidak memuat meliputi:
- Cari kesalahan ketik di JavaScript Anda, termasuk huruf besar. JavaScript peka huruf besar kecil.
- Pastikan Anda memiliki pengaturan zoom dan pusat.
- Pastikan bahwa elemen DIV Anda ada di halaman dengan ID yang benar.
- Pastikan bahwa elemen DIV Anda memiliki ketinggian.
04 dari 05
Tambahkan Penanda ke Peta Anda
Tapi apa gunanya peta lokasi Anda jika tidak ada penanda yang memberi tahu orang-orang ke mana mereka harus pergi?
Untuk menambahkan penanda Google Maps standar, tambahkan hal-hal berikut ke skrip Anda di bawah baris var map = ...:
var myLatlng = google.maps.LatLng baru ( lintang, bujur );
var marker = google.maps.Marker baru ({
posisi: myLatlng,
peta: peta,
title: " Mantan Kantor Pusat About.com "
});
Ubah teks yang disorot ke lintang dan bujur Anda dan judul yang ingin ditampilkan ketika orang mengarahkan kursor ke penanda.
Anda dapat menambahkan banyak penanda ke halaman yang Anda inginkan, tambahkan saja variabel baru dengan koordinat dan judul baru, tetapi jika peta terlalu kecil untuk menampilkan semua penanda, itu tidak akan ditampilkan kecuali pembaca membesar.
var latlng 2 = google.maps.LatLng baru ( 37.3316591, -122.0301778 );
var myMarker 2 = google.maps.Marker baru ({
posisi: latlng 2 ,
peta: peta,
judul: " Apple Computer "
});
Berikut ini contoh peta Google dengan spidol. Perhatikan, karena cara kerja CMS About.com, Anda harus mengeklik tautan untuk memunculkan peta. Ini tidak akan terjadi pada halaman Anda.
05 dari 05
Tambahkan Peta Kedua (atau Lebih) ke Halaman Anda
Jika Anda telah melihat halaman peta Google contoh saya, Anda akan melihat bahwa saya memiliki lebih dari satu peta yang ditampilkan pada halaman. Ini sangat mudah untuk dilakukan. Begini caranya.
- Dapatkan lintang dan bujur dari semua peta yang ingin Anda tampilkan seperti yang kita pelajari di langkah 2 dari tutorial ini.
- Masukkan peta pertama seperti yang kita pelajari di langkah 3 dari tutorial ini. Jika Anda ingin peta memiliki penanda, tambahkan penanda seperti pada langkah 4.
- Untuk peta kedua, Anda perlu menambahkan 3 baris baru ke skrip inisialisasi () Anda:
var latlng2 = google.maps.LatLng baru ( koordinat kedua );
var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = google.maps.Map baru (document.getElementById ("map_canvas_2"), myOptions2); - Jika Anda menginginkan penanda pada peta baru juga, tambahkan penanda kedua yang menunjuk pada koordinat kedua dan peta kedua:
var myMarker2 = google.maps.Marker baru ({position: latlng2 , map: map2 , title: " Your Marker Title "}); - Kemudian tambahkan yang kedua
di mana Anda ingin peta kedua. Dan pastikan untuk memberikan ID id = "map_canvas_2".
- Ketika halaman Anda dimuat, dua peta akan ditampilkan
Berikut adalah kode halaman dengan dua peta Google: