Kumaha Tambahkeun Google Peta mun Page Web anjeun

01 of 05

Meunangkeun Google Maps API Key pikeun Loka anjeun

Cara pangalusna pikeun nambahkeun peta Google kana ramatloka anjeun ngagunakeun Google Maps API. Jeung Google ngajak nu meunang hiji konci API guna nganggo peta.

Anjeun teu diperlukeun pikeun meunangkeun konci API ngagunakeun Google Maps API v3, tapi éta pisan mangpaat sakumaha eta ngidinan Anjeun ngawas pamakéan anjeun sarta mayar aksés tambahan. Google Maps API v3 ngabogaan kuota 1 pamundut per detik per pamaké ka maksimum 25,000 requests per poé. Mun kaca anjeun ngaleuwihan wates jelema anjeun bakal kedah ngaktipkeun tagihan dina raraga neangan deui.

Kumaha carana meunangkeun Google Maps API Key

1. Login ka Google maké akun Google Anjeun.
2. Buka konsol pamekar
3. Ngagulung daftar jeung manggihan Google Maps API v3, teras klik tombol "OFF" ngahurungkeun deui on.
4. Baca jeung satuju kana istilah.
5. Buka konsol API tur pilih "API Aksés" ti menu kénca-leungeun
6. Dina bagian "Basajan API Aksés", klik dina "Jieun konci Server anyar ..." tombol.
7. Lebetkeun alamat IP tina server ramat anjeun. Ieu teh IP mana requests Maps Anjeun bakal datang ti. Mun anjeun teu nyaho alamat IP anjeun, anjeun bisa ngungkaban deui nepi.
8. Nyalin téks dina "konci API:" garis (teu kaasup judul nu). Ieu konci API anjeun peta Anjeun.

02 of 05

Ngarobah Alamat anjeun mun koordinat

Dina urutan nganggo Google Maps dina kaca web, anjeun kudu boga lintang jeung bujur pikeun lokasi. Anjeun tiasa meunang ieu ti GPS atawa Anjeun tiasa make tanda alat online kawas Geocoder.us ngabejaan anjeun.

1. Buka Geocoder.us tur ngetik dina alamat anjeun dina kotak search.
2. Nyalin jumlah munggaran pikeun lintang (tanpa surat di hareup) jeung lebetkeun dina file téks. Anjeun teu kedah indikator gelar (º).
3. Nyalin jumlah munggaran pikeun bujur (deui tanpa surat di hareup) teras lebetkeun file téks Anjeun.

lintang Anjeun tur bujur bakal béda hal kawas kieu:

40.756076
-73,990838

Geocoder.us ngan lumaku pikeun alamat AS, lamun perlu meunang koordinat di nagara sejen, Anjeun kudu neangan alat sarupa di wewengkon Anjeun.

03 of 05

Nambahkeun Peta ka Page Web anjeun

Kahiji, Tambahkeun ka Script Peta ka

tina Dokumén anjeun

Buka kaca web anjeun sarta nambahan handap ka kapala dokumen Anjeun.

Ngarobah bagian disorot ka lintang jeung bujur angka Anjeun wrote handap dina hambalan dua.

Kadua, Tambahkeun ka Unsur Peta mun Page anjeun

Sakali anjeun gaduh sakabeh elemen naskah ditambahkeun kana kapala dokumen, anjeun kudu posisi peta anjeun dina kaca. Anjeun ngalakukeun ieu ku cara nambahkeun unsur DIV jeung id = "peta-kanvas" atribut. Kuring nyarankeun Anjeun ogé gaya div ieu kalawan lebar tur jangkungna anu bakal cocog dina kaca anjeun:

Tungtungna, pépéling jeung Test

Hal panungtungan mun geus unggah kaca anjeun sarta uji nu mintonkeun peta Anjeun. Di handap ieu conto tina peta Google dina kaca. Catetan, kusabab jalan teh About.com CMS jalan, anjeun bakal kudu klik tumbu ka meunang peta ka némbongan. Ieu moal jadi kasus dina kaca anjeun.

Mun peta anjeun teu némbongkeun up, coba initializing eta ku atribut awak:

onload = "initialize ()">

hal séjén lamun rék mariksa lamun peta anjeun teu loading ngawengku:

• Néangan typos di anjeun JavaScript, kaasup hal. JavaScript mangrupa hal nu sensitip.
• Pastikeun yén anjeun boga zum sarta puseur pilihan disetel.
• Pastikeun yén unsur DIV anjeun dina kaca sareng ngabenerkeun ID.
• Pastikeun yén unsur DIV anjeun boga jangkungna hiji.

04 of 05

Tambahkeun kamajuan pikeun Peta anjeun

Tapi naon alus nyaéta peta lokasi Anjeun lamun euweuh kamajuan sangkan urang mana maranéhanana kudu balik?

Nambahkeun baku Google Maps kamajuan beureum nambahkeun di handap pikeun Aksara Anjeun handap peta var = ... jalur:

var myLatlng = anyar google.maps.LatLng (lintang, bujur);
var kamajuan = google.maps.Marker anyar ({
posisi: myLatlng,
peta: peta,
Judul: "Urut Markas About.com"
});

Ngarobah téks disorot ka lintang Anjeun tur bujur na judul nu remen némbongan lamun jalma hover leuwih kamajuan dina.

Anjeun tiasa nambahkeun saloba spidol ka kaca sakumaha anjeun resep, ngan nambahan variabel anyar kalawan koordinat anyar jeung judul, tapi lamun peta teuing leutik pikeun nembongkeun sadaya spidol, aranjeunna moal nembongkeun iwal maca zooms kaluar.

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

Di handap ieu conto tina peta Google kalawan kamajuan hiji. Catetan, sabab sahiji jalan About.com CMS jalan, anjeun kudu klik tumbu ka meunang peta ka némbongan. Ieu moal jadi kasus dina kaca anjeun.

05 of 05

Nambahkeun hiji Kadua (atawa More) Peta mun Page anjeun

Mun anjeun geus kokotéténgan dina kaca peta conto Google abdi anjeun gé aya bewara yen kuring gaduh leuwih ti hiji peta dipintonkeun dina kaca. Ieu pisan gampang pikeun ngalakukeun. Di dieu nu kumaha.

1. Meunangkeun hal nu lintang jeung bujur tina sagala peta rék nembongkeun salaku urang diajar di hambalan 2 of tutorial ieu.
2. Selapkeun peta kahiji salaku urang diajar di hambalan 3 of tutorial ieu. Upami anjeun hoyong peta boga kamajuan hiji, nambahan kamajuan sakumaha dina hambalan 4.
3. Pikeun peta kadua, anjeun bakal kudu nambahan 3 garis anyar pikeun initialize anjeun () Aksara:
   var latlng2 = anyar google.maps.LatLng (kadua koordinat);
   var myOptions2 = {zum: 18 puseur: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = google.maps.Map anyar (document.getElementById ( "map_canvas_2"), myOptions2);
4. Upami Anjeun hoyong kamajuan dina peta anyar teuing, nambah kamajuan kadua ngarah di koordinat kadua jeung peta kadua:
   var myMarker2 = anyar google.maps.Marker ({posisi: latlng2, peta: map2, judulna: "anjeun kamajuan Judul"});
5. Lajeng nambahkeun kadua

   mana rék peta kadua. Tur pastikeun masihan eta hiji id = "map_canvas_2" ID.

6. Nalika anjeun kaca beban, dua peta bakal nembongkeun

Di dieu nyaeta kodeu tina kaca dua peta Google dinya: