Dapatkan Kunci API Google Maps untuk Tapak Anda
Cara terbaik untuk menambahkan peta Google ke tapak web anda adalah dengan menggunakan Google Maps API. Dan Google mengesyorkan agar anda mendapat kunci API untuk menggunakan peta.
Anda tidak perlu mendapatkan kunci API untuk menggunakan API Peta Google v3, tetapi ia sangat berguna kerana ia membolehkan anda memantau penggunaan anda dan membayar akses tambahan. Google Maps API v3 mempunyai kuota 1 permintaan per saat bagi setiap pengguna kepada maksimum 25,000 permintaan sehari. Jika halaman anda melebihi had tersebut, anda perlu mengaktifkan pengebilan untuk mendapatkan lebih banyak.
Bagaimana untuk mendapatkan Kunci API Google Maps
- Masuk ke Google menggunakan akaun Google anda.
- Pergi ke Konsol Pemaju
- Tatal melalui senarai dan cari API Google Maps v3, kemudian klik butang "MATI" untuk menghidupkannya.
- Baca dan bersetuju dengan terma.
- Pergi ke konsol API dan pilih "Akses API" dari menu sebelah kiri
- Dalam bahagian "Mudah API Akses", klik pada butang "Buat kunci Server baru …".
- Masukkan alamat IP pelayan web anda. Inilah IP tempat permohonan Peta anda akan datang. Jika anda tidak tahu alamat IP anda, anda boleh melihatnya.
- Salin teks pada baris "API utama:" (tidak termasuk tajuk itu). Ini adalah kunci API anda untuk peta anda.
Tukar Alamat Anda ke Koordinat
Untuk menggunakan Peta Google pada halaman web anda, anda perlu mempunyai latitud dan bujur untuk lokasi. Anda boleh mendapatkannya dari GPS atau anda boleh menggunakan alat dalam talian seperti Geocoder.us untuk memberitahu anda.
- Pergi ke Geocoder.us dan taip alamat anda di dalam kotak carian.
- Salin nombor pertama untuk latitud (tanpa huruf di depan) dan tampal ke fail teks. Anda tidak memerlukan penunjuk ijazah (º).
- Salin nombor pertama untuk bujur (sekali lagi tanpa huruf di depan) dan tampal ke fail teks anda.
Lintang dan bujur anda akan kelihatan seperti ini:
40.756076-73.990838
Geocoder.us hanya berfungsi untuk alamat A.S., jika anda perlu mendapatkan koordinat di negara lain, anda harus mencari alat yang sama di wilayah anda.
03 dari 05Menambah Peta ke Halaman Web Anda
Pertama, Tambah Skrip Peta kepada
Dokumen Anda
Buka laman web anda dan tambahkan yang berikut ke HEAD dokumen anda.
Tukar bahagian yang diserlahkan ke nombor latitud dan longitud yang anda tulis dalam langkah kedua.
Kedua, Tambah Unsur Peta ke Halaman Anda
Sebaik sahaja anda mempunyai semua elemen skrip yang ditambah kepada HEAD dokumen anda, anda perlu meletakkan peta anda pada halaman. Anda melakukan ini dengan menambah a DIV elemen dengan id = "map-kanvas" atribut. Saya cadangkan anda juga menyesuaikan div ini dengan lebar dan ketinggian yang akan muat pada halaman anda:
Akhirnya, Muat Naik dan Uji
Perkara terakhir yang perlu dilakukan adalah memuat naik halaman anda dan menguji bahawa paparan peta anda. Berikut adalah contoh peta Google pada halaman. Perhatikan, kerana cara kerja CMS About.com berfungsi, anda perlu mengklik pautan untuk mendapatkan peta dipaparkan. Ini tidak akan berlaku pada halaman anda.
Jika peta anda tidak dipaparkan, cuba mulakannya dengan BODY atribut:
onload = "initialize ()" >
Perkara-perkara lain untuk memeriksa jika peta anda tidak dimuatkan termasuk:
- Cari kesilapan dalam JavaScript anda, termasuk kes. JavaScript adalah sensitif kes.
- Pastikan bahawa anda mempunyai
zumdanpusatpilihan ditetapkan. - Pastikan anda
DIVunsur adalah pada halaman dengan ID yang betul. - Pastikan anda
DIVelemen mempunyai ketinggian.
Tambah Penanda ke Peta Anda
Tetapi apa yang baik adalah peta lokasi anda jika tidak ada penanda memberitahu orang di mana mereka harus pergi?
Untuk menambah penanda merah Peta Google standard, masukkan perkara berikut ke skrip anda di bawah var map = … baris:
var myLatlng = new google.maps.LatLng ( latitud, longitud );var marker = new google.maps.Marker ({kedudukan: myLatlng,peta: peta,tajuk: " Bekas Ibu Pejabat About.com '});
Tukar teks yang diserlahkan ke latitud dan bujur dan tajuk yang anda ingin tunjukkan apabila orang melayang ke atas penanda.
Anda boleh menambah seberapa banyak penanda pada halaman yang anda suka, hanya tambahkan pemboleh ubah baru dengan koordinat dan tajuk baru, tetapi jika peta terlalu kecil untuk memaparkan semua penanda, mereka tidak akan dipaparkan melainkan pembaca zoom.
var latlng 2 = google.maps.LatLng baru ( 37.3316591,-122.0301778 );var myMarker 2 = baru google.maps.Marker ({kedudukan: latlng 2 ,peta: peta,tajuk: " Apple Computer '});
Berikut adalah contoh peta Google dengan penanda. Perhatikan, kerana cara kerja CMS About.com berfungsi, anda perlu mengklik pautan untuk mendapatkan peta muncul. Ini tidak akan berlaku pada halaman anda.
05 dari 05Tambah Peta Kedua (atau Lebih) ke Halaman Anda
Jika anda melihat contoh peta Google saya, anda akan melihat bahawa saya mempunyai lebih daripada satu peta yang dipaparkan pada halaman. Ini sangat mudah dilakukan. Ini caranya.
- Dapatkan latitud dan bujur semua peta yang anda mahu paparkan seperti yang kita pelajari dalam langkah 2 tutorial ini.
- Masukkan peta pertama seperti yang kita pelajari dalam langkah 3 tutorial ini. Jika anda mahu peta mempunyai penanda, tambah penanda seperti pada langkah 4.
- Untuk peta kedua, anda perlu menambah 3 barisan baharu untuk skrip inisialisasi anda ():
var latlng2 = new google.maps.LatLng ( koordinat kedua );var myOptions2 = {zoom: 18, tengah: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Sekiranya anda mahu penanda pada peta baru juga, tambah penanda kedua yang menunjuk pada koordinat kedua dan peta kedua:
var myMarker2 = new google.maps.Marker ({kedudukan: latlng2 , peta: map2 , tajuk: " Tajuk Penanda Anda ' }); - Kemudian tambahkan tempat kedua di mana anda mahu peta kedua. Dan pastikan untuk memberikannya
id = "map_canvas_2"ID. - Apabila halaman anda dimuatkan, dua peta akan dipaparkan
Berikut ialah kod halaman dengan dua peta Google:
