Cara Tambah Google Map menyang Kaca Web Sampeyan

01 saka 05

Njaluk Google Maps API Key kanggo Site Sampeyan

Cara sing paling apik kanggo nambah peta Google menyang situs web sampeyan yaiku nggunakake Google Maps API. Lan Google nyaranake sampeyan entuk kunci API kanggo nggunakake peta.

Sampeyan ora perlu kanggo njaluk kunci API kanggo nggunakake Google Maps API v3, nanging migunani banget amarga ngijini sampeyan ngawasi panggunaan lan mbayar akses tambahan. Google Maps API v3 nduweni kuota 1 pangguna per detik kanggo pangguna nganti maksimal 25.000 panjalukan saben dina. Yen kaca sampeyan ngluwihi limit kasebut, sampeyan kudu ngaktifake tagihan kanggo entuk luwih.

Cara kanggo entuk Google Maps API Key

1. Mlebu menyang Google nggunakake akun Google.
2. Menyang Console Developers
3. Gulung dhaptar banjur temokake Google Maps API v3, banjur klik tombol "MATI" kanggo nguripake.
4. Maca lan setuju karo istilah.
5. Pindhah menyang konsol API lan pilih "Akses API" saka menu kiwa
6. Ing "Akses API Wikipedia", klik tombol "Gawe tombol Server anyar ...".
7. Ketik alamat IP saka server web sampeyan. Iki IP ngendi panjalukan Peta bakal teka saka. Yen sampeyan ora ngerti alamat IP sampeyan, sampeyan bisa ndeleng.
8. Salin teks ing tombol "API::" (ora kalebu judhul kasebut). Iki tombol API kanggo peta sampeyan.

02 saka 05

Ngonversi Alamat Sampeyan ing Koordinat

Supaya bisa nggunakake Google Maps ing kaca web sampeyan, sampeyan kudu duwe garis lintang lan bujur. Sampeyan bisa njaluk iki saka GPS utawa sampeyan bisa nggunakake alat online kaya Geocoder.us kanggo pitutur marang kowe.

1. Pindhah menyang Geocoder.us lan ketik alamat sampeyan ing kothak panelusuran.
2. Nyalin nomer pisanan kanggo garis lintang (tanpa huruf ing ngarep) lan paste menyang file teks. Sampeyan ora butuh indikator (º).
3. Salin angka pisanan kanggo bujur (maneh tanpa huruf ing ngarep) lan paste menyang file teks.

Lintang lan bujur sampeyan bakal katon kaya iki:

40.756076
-73.990838

Geocoder.us mung dianggo kanggo alamat US, yen sampeyan perlu koordinat ing negara liya, sampeyan kudu nggolèki alat sing padha ing wilayah sampeyan.

03 saka 05

Nambahake Map menyang Kaca Web Sampeyan

Pisanan, Tambah Script Peta menyang

Dokumen Panjenengan

Bukak kaca web sampeyan lan tambahake ing ngisor iki ing HEAD document sampeyan.

Ngganti bagean sing disorot ing garis lintang lan bujur sing ditulis ing langkah loro.

Kapindho, Tambah Elemen Peta menyang Page Panjenengan

Yen sampeyan duwe kabeh unsur skrip sing ditambahake ing HEAD dokumen, sampeyan kudu nyetel peta sampeyan ing kaca. Sampeyan nindakake iki kanthi nambahake unsur DIV kanthi id = "peta-kanvas" atribut. Aku nyaranake sampeyan uga gaya div iki karo jembar lan dhuwur sing bakal pas ing kaca:

Pungkasan, Upload lan Test

Babagan pungkasan sing bakal dilakoni yaiku ngunggah kaca lan nyoba peta sing dipamerake. Punika conto peta Google ing kaca. Elingi, amarga cara CMS About.com bisa dianggo, sampeyan kudu ngeklik link supaya peta bisa katon. Iki ora bakal kedadeyan ing kaca sampeyan.

Yen peta ora katon, coba ngesetna nganggo atribut BODY:

onload = "initialize ()" >

Bab liya kanggo mriksa yen peta ora mbukak kalebu:

• Goleki typo ing JavaScript sampeyan, kalebu cilik. JavaScript iku cilik sensitif.
• Priksa manawa sampeyan duwe pilihan zoom lan pusat pilihan.
• Priksa manawa unsur DIV sampeyan ana ing kaca kanthi ID sing bener.
• Priksa manawa unsur DIV sampeyan dhuwur.

04 saka 05

Nambah Marker kanggo Peta Panjenengan

Nanging sing apik iku peta lokasi sampeyan yen ora ana marker sing nuduhake wong ngendi kudu lunga?

Kanggo nambah standar penanda abang Google Maps nambahake ing ngisor iki menyang skrip panjenengan ing ngisor peta var = ...:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
posisi: myLatlng,
peta: peta,
irah-irahan: " Mantan About.com Kantor Pusat "
});

Ngganti teks sing disorot menyang garis lintang lan bujur lan judhul sing arep katon nalika wong kisaran.

Sampeyan bisa nambahake sawetara marker menyang kaca sing dikepengini, mung nambah variasi anyar karo koordinat lan judhul sing anyar, nanging yen peta cilik banget kanggo nampilake kabeh marker, ora bakal ditampilake yen maca kasebut metu.

var latlng 2 = google.maps.LatLng anyar ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
posisi: latlng 2 ,
peta: peta,
judul: " Apple Computer "
});

Punika conto peta Google kanthi marker. Elinga, amarga cara CMS About.com bisa dianggo, sampeyan kudu ngeklik link supaya peta bisa katon. Iki ora bakal kedadeyan ing kaca sampeyan.

05 saka 05

Tambah Peta (utawa Liyane) kapindho menyang Panjenengan Halaman

Yen sampeyan ndeleng kaca conto Google, sampeyan bakal weruh yen aku duwe luwih saka siji peta sing ditampilake ing kaca. Iki gampang banget. Kene carane.

1. Njaluk garis lintang lan bujur kabeh peta sing pengin ditampilake kaya sing kita sinau ing langkah 2 tutorial iki.
2. Sisipake peta pisanan kaya sing kita sinau ing langkah 3 tutorial iki. Yen pengin peta duwe marker, tambah marker ing langkah 4.
3. Kanggo peta kapindho, sampeyan kudu nambah 3 baris anyar kanggo tulisan initialize ():
   var latlng2 = new google.maps.LatLng ( koordinat liya );
   var myOptions2 = {zoom: 18, tengah: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Yen sampeyan pengin panandha ing peta anyar uga, tuduhake tandha liya ing titik koordinat kaping pindho lan peta kapindho:
   var myMarker2 = new google.maps.Marker ({posisi: latlng2 , peta: map2 , judhul: " Panjenengan Marker Title "});
5. Banjur nambahake angka loro

   ing ngendi sampeyan pengin peta kapindho. Lan manawa menehi ID id = "map_canvas_2".

6. Nalika kaca mbukak, rong peta bakal ditampilake

Punika kode kaca kanthi rong peta Google: