Cara Tambah Peta Google ke Halaman Web Anda

01 dari 05

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

1. Masuk ke Google menggunakan akaun Google anda.
2. Pergi ke Konsol Pemaju
3. Tatal melalui senarai dan cari API Google Maps v3, kemudian klik butang "MATI" untuk menghidupkannya.
4. Baca dan bersetuju dengan terma.
5. Pergi ke konsol API dan pilih "Akses API" dari menu sebelah kiri
6. Dalam bahagian "Mudah API Akses", klik pada butang "Buat kunci Server baru ...".
7. Masukkan alamat IP pelayan web anda. Inilah IP tempat permohonan Peta anda akan datang. Jika anda tidak tahu alamat IP anda, anda boleh melihatnya.
8. Salin teks pada baris "API utama:" (tidak termasuk tajuk itu). Ini adalah kunci API anda untuk peta anda.

02 dari 05

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.

1. Pergi ke Geocoder.us dan taip alamat anda di dalam kotak carian.
2. Salin nombor pertama untuk latitud (tanpa huruf di depan) dan tampal ke fail teks. Anda tidak memerlukan penunjuk ijazah (º).
3. 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 AS, jika anda perlu mendapatkan koordinat di negara lain, anda harus mencari alat yang sama di wilayah anda.

03 dari 05

Menambah 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 ditambahkan ke HEAD dokumen anda, anda perlu meletakkan peta anda pada halaman. Anda melakukan ini dengan menambah elemen DIV dengan atribut id = "peta-kanvas". 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 muncul, cuba mulakannya dengan atribut BODY:

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 anda mempunyai set zum dan pusat pilihan.
• Pastikan elemen DIV anda berada pada halaman dengan ID yang betul.
• Pastikan elemen DIV anda mempunyai ketinggian.

04 dari 05

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 menambahkan penanda merah Peta Google standard, masukkan yang berikut ke skrip anda di bawah var map = ... baris:

var myLatlng = google.maps.LatLng baru ( latitud, longitud );
var marker = new google.maps.Marker ({
kedudukan: myLatlng,
peta: peta,
tajuk: " 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 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new 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 05

Tambah 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.

1. Dapatkan latitud dan bujur semua peta yang anda mahu paparkan seperti yang kita pelajari dalam langkah 2 tutorial ini.
2. Masukkan peta pertama seperti yang kita pelajari dalam langkah 3 tutorial ini. Jika anda mahu peta mempunyai penanda, tambah penanda seperti pada langkah 4.
3. 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);
4. 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: " Title Marker Anda "});
5. Kemudian tambah yang kedua

   di mana anda mahu peta kedua. Dan pastikan anda memberikan ID id = "map_canvas_2".

6. Apabila halaman anda dimuatkan, dua peta akan dipaparkan

Berikut ialah kod halaman dengan dua peta Google: