01 of 05
ໄດ້ຮັບຫຼັກ API ຂອງ Google Maps ສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ
ວິທີທີ່ດີທີ່ສຸດທີ່ຈະເພີ່ມແຜນທີ່ Google ໃນເວັບໄຊທ໌ຂອງທ່ານແມ່ນການໃຊ້ Google Maps API. ແລະ Google ແນະນໍາໃຫ້ທ່ານໄດ້ຮັບຫຼັກ API ໃນການນໍາໃຊ້ແຜນທີ່.
ທ່ານບໍ່ຈໍາເປັນຕ້ອງໄດ້ຮັບຄີ API ເພື່ອນໍາໃຊ້ Google Maps API v3, ແຕ່ມັນມີປະໂຫຍດຫຼາຍເພາະມັນຊ່ວຍໃຫ້ທ່ານຕິດຕາມການໃຊ້ງານຂອງທ່ານແລະຈ່າຍຄ່າການເຂົ້າເຖິງເພີ່ມເຕີມ. Google Maps API v3 ມີຄໍາຖາມ 1 ຄໍາຮ້ອງຂໍຕໍ່ວິນາທີຕໍ່ຜູ້ໃຊ້ສູງສຸດເຖິງ 25,000 ຄໍາຮ້ອງທຸກຕໍ່ມື້. ຖ້າຫນ້າຂອງທ່ານເກີນຄວາມຈໍາກັດເຫຼົ່ານັ້ນທ່ານຈະຕ້ອງເປີດການເອີ້ນເກັບເງິນເພື່ອໃຫ້ໄດ້ຮັບຫຼາຍກວ່ານີ້.
ວິທີການຮັບຄີ Google Maps API
- ເຂົ້າສູ່ລະບົບກັບ Google ໂດຍໃຊ້ບັນຊີ Google ຂອງທ່ານ.
- ໄປທີ່ຄອນໂຊນພັດທະນາ
- ເລື່ອນໄປຫາບັນຊີແລະຊອກຫາ Google Maps API v3 ແລ້ວກົດປຸ່ມ "OFF" ເພື່ອເປີດມັນ.
- ອ່ານແລະຍອມຮັບຂໍ້ຕະກະລົງ.
- ໄປທີ່ console APIs ແລະເລືອກ "API Access" ຈາກເມນູດ້ານຊ້າຍ
- ໃນສ່ວນ "ການເຂົ້າເຖິງງ່າຍດາຍ API", ໃຫ້ຄລິກໃສ່ປຸ່ມ "ສ້າງໃຫມ່ເຄື່ອງແມ່ຂ່າຍ ... ".
- ກະລຸນາໃສ່ທີ່ຢູ່ IP ຂອງເຄື່ອງແມ່ຂ່າຍຂອງທ່ານ. ນີ້ແມ່ນ IP ທີ່ການຮ້ອງຂໍແຜນທີ່ຂອງທ່ານຈະມາຈາກ. ຖ້າທ່ານບໍ່ຮູ້ທີ່ຢູ່ IP ຂອງທ່ານ, ທ່ານສາມາດເບິ່ງມັນໄດ້.
- ຄັດລອກຂໍ້ຄວາມກ່ຽວກັບ "ຄີ API:" (ບໍ່ລວມຫົວຂໍ້ນັ້ນ). ນີ້ແມ່ນຫຼັກ API ຂອງທ່ານສໍາລັບແຜນທີ່ຂອງທ່ານ.
02 of 05
ປ່ຽນທີ່ຢູ່ຂອງທ່ານໄປຫາພິກັດ
ເພື່ອໃຊ້ Google Maps ໃນຫນ້າເວັບຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງມີຄວາມຍາວແລະຄວາມຍາວຂອງສະຖານທີ່. ທ່ານສາມາດໄດ້ຮັບເຫຼົ່ານີ້ຈາກ GPS ຫຼືທ່ານສາມາດໃຊ້ເຄື່ອງມືອອນໄລນ໌ເຊັ່ນ Geocoder.us ເພື່ອບອກທ່ານ.
- ໄປ Geocoder.us ແລະພິມໃນທີ່ຢູ່ຂອງທ່ານໃນກ່ອງຊອກຫາ.
- ຄັດລອກຫມາຍເລກທໍາອິດສໍາລັບ latitude (ໂດຍບໍ່ມີຕົວອັກສອນຢູ່ທາງຫນ້າ) ແລະວາງມັນລົງໃນໄຟລ໌ຂໍ້ຄວາມ. ທ່ານບໍ່ຕ້ອງການຕົວຊີ້ວັດ (º).
- ຄັດລອກຫມາຍເລກທໍາອິດສໍາລັບໄລຍະຍາວ (ອີກເທື່ອຫນຶ່ງໂດຍບໍ່ມີຕົວອັກສອນຢູ່ທາງຫນ້າ) ແລະວາງມັນລົງໃນໄຟລ໌ຂໍ້ຄວາມຂອງທ່ານ.
ຄວາມຍາວແລະຄວາມຍາວຂອງທ່ານຈະມີລັກສະນະເຊັ່ນ:
40756076
-73990838
Geocoder.us ເຮັດວຽກພຽງແຕ່ສໍາລັບທີ່ຢູ່ອາເມລິກາ, ຖ້າທ່ານຕ້ອງການຫາຈຸດປະສານງານຢູ່ໃນປະເທດອື່ນ, ທ່ານຄວນຊອກຫາເຄື່ອງມືທີ່ຄ້າຍຄືກັນຢູ່ໃນຂົງເຂດຂອງທ່ານ.
03 of 05
ເພີ່ມແຜນທີ່ເວັບຫນ້າຂອງທ່ານ
ຫນ້າທໍາອິດ, ຕື່ມແຜນທີ່ສະແກນກັບ
ຂອງເອກະສານຂອງທ່ານ
ເປີດຫນ້າເວັບຂອງທ່ານແລະເພີ່ມດັ່ງຕໍ່ໄປນີ້ຫົວຂອງເອກະສານຂອງທ່ານ.
ປ່ຽນສ່ວນທີ່ໄດ້ເນັ້ນໃສ່ກັບຈໍານວນ latitude ແລະ longitude ທີ່ທ່ານຂຽນໄວ້ໃນຂັ້ນຕອນທີສອງ.
ຄັ້ງທີສອງ, ຕື່ມແຜນທີ່ອົງປະກອບຂອງແຜນທີ່ຂອງທ່ານ
ເມື່ອທ່ານມີອົງປະກອບສະຄິບທັງຫມົດເພີ່ມໃສ່ HEAD ຂອງເອກະສານຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງຈັດວາງແຜນທີ່ຂອງທ່ານໃນຫນ້າເວັບ. ທ່ານເຮັດສິ່ງນີ້ໂດຍການເພີ່ມອົງປະກອບ DIV ທີ່ມີ id = "map-canvas" attribute. ຂ້າພະເຈົ້າແນະນໍາໃຫ້ທ່ານສະແດງແບບນີ້ດ້ວຍຄວາມກວ້າງແລະຄວາມສູງທີ່ເຫມາະສົມກັບຫນ້າຂອງທ່ານ:
ສຸດທ້າຍ, ອັບໂຫລດແລະທົດສອບ
ສິ່ງສຸດທ້າຍທີ່ຕ້ອງເຮັດຄືການອັບໂຫລດຫນ້າເວັບແລະການທົດສອບທີ່ສະແດງແຜນທີ່ຂອງທ່ານ. ນີ້ແມ່ນຕົວຢ່າງຂອງແຜນທີ່ Google ໃນຫນ້ານີ້. ຫມາຍເຫດ, ເນື່ອງຈາກວ່າວິທີການເຮັດວຽກ About.com CMS, ທ່ານຈະຕ້ອງກົດການເຊື່ອມຕໍ່ເພື່ອໃຫ້ແຜນທີ່ຈະປາກົດ. ນີ້ຈະບໍ່ເປັນກໍລະນີໃນຫນ້າຂອງທ່ານ.
ຖ້າແຜນທີ່ຂອງທ່ານບໍ່ສະແດງໃຫ້ເຫັນ, ລອງເລີ່ມຕົ້ນມັນດ້ວຍຄຸນສົມບັດ BODY:
onload = "initialize ()" >
ສິ່ງອື່ນທີ່ຈະກວດສອບວ່າແຜນຂອງທ່ານບໍ່ປະກອບມີ:
- ຊອກຫາ typos ໃນ JavaScript ຂອງທ່ານ, ລວມທັງກໍລະນີ. JavaScript ແມ່ນຕົວຫນັງສືທີ່ລະອຽດອ່ອນ.
- ໃຫ້ແນ່ໃຈວ່າທ່ານມີຕົວເລືອກຂະຫຍາຍແລະເລືອກສູນກາງ.
- ໃຫ້ແນ່ໃຈວ່າອົງປະກອບ DIV ຂອງທ່ານຢູ່ໃນຫນ້າທີ່ມີ ID ທີ່ຖືກຕ້ອງ.
- ໃຫ້ແນ່ໃຈວ່າອົງປະກອບ DIV ຂອງທ່ານມີຄວາມສູງ.
04 of 05
ເພີ່ມເຄື່ອງຫມາຍໃນແຜນທີ່ຂອງທ່ານ
ແຕ່ສິ່ງທີ່ດີແມ່ນແຜນທີ່ຂອງສະຖານທີ່ຂອງທ່ານຖ້າບໍ່ມີເຄື່ອງຫມາຍບອກຄົນທີ່ພວກເຂົາຄວນໄປຢູ່ບໍ?
ເພື່ອເພີ່ມເຄື່ອງຫມາຍສີແດງມາດຕະຖານຂອງ Google Maps ໃຫ້ຕື່ມຂໍ້ມູນຕໍ່ໄປນີ້ຕໍ່ກັບສະຄິບຂອງທ່ານຂ້າງລຸ່ມນີ້: ເສັ້ນທາງ var = ... ເສັ້ນ:
var myLatlng = new googlemapsLatLng ( latitude, longitude );
var marker = new googlemapsMarker ({
ຕໍາແຫນ່ງ: myLatlng,
ແຜນທີ່: ແຜນທີ່,
ຫົວຂໍ້: " ສໍານັກງານໃຫຍ່ກ່ອນຫນ້ານີ້ "
})
ປ່ຽນແປງຂໍ້ຄວາມທີ່ເນັ້ນໃສ່ຄວາມຍາວແລະຄວາມຍາວຂອງທ່ານແລະຫົວຂໍ້ທີ່ທ່ານມັກຈະປາກົດຢູ່ໃນເວລາທີ່ປະຊາຊົນເລື່ອນໃສ່ເຄື່ອງຫມາຍ.
ທ່ານສາມາດເພີ່ມເຄື່ອງຫມາຍຈໍານວນຫຼາຍໃຫ້ຫນ້າຕາມທີ່ທ່ານຕ້ອງການ, ພຽງແຕ່ເພີ່ມຕົວແປໃຫມ່ທີ່ມີຈຸດປະສານແລະຕໍາແຫນ່ງໃຫມ່, ແຕ່ຖ້າແຜນທີ່ນ້ອຍເກີນໄປທີ່ຈະສະແດງເຄື່ອງຫມາຍທັງຫມົດ, ມັນຈະບໍ່ສະແດງເວັ້ນເສຍແຕ່ຜູ້ອ່ານຈະອອກ.
var latlng 2 = new googlemapsLatLng ( 373316591, -1220301778 )
var myMarker 2 = new googlemapsMarker ({
ຕໍາແຫນ່ງ: latlng 2 ,
ແຜນທີ່: ແຜນທີ່,
ຊື່: " Apple Computer "
})
ນີ້ແມ່ນຕົວຢ່າງຂອງແຜນທີ່ Google ດ້ວຍເຄື່ອງຫມາຍ. ຫມາຍເຫດ, ເນື່ອງຈາກວ່າວິທີການ About.com CMS ເຮັດວຽກ, ທ່ານຕ້ອງກົດການເຊື່ອມຕໍ່ເພື່ອໃຫ້ແຜນທີ່ຈະປາກົດ. ນີ້ຈະບໍ່ເປັນກໍລະນີໃນຫນ້າຂອງທ່ານ.
05 of 05
ເພີ່ມແຜນທີ່ສອງ (ຫຼືຫຼາຍກວ່າ) ເພື່ອຫນ້າຂອງທ່ານ
ຖ້າທ່ານໄດ້ເບິ່ງຢູ່ໃນຫນ້າແຜນທີ່ Google ຂອງຂ້ອຍ, ທ່ານຈະສັງເກດເຫັນວ່າຂ້ອຍມີແຜນທີ່ຫຼາຍກວ່າຫນຶ່ງທີ່ສະແດງຢູ່ໃນຫນ້ານີ້. ນີ້ແມ່ນງ່າຍທີ່ສຸດທີ່ຈະເຮັດ. ນີ້ແມ່ນວິທີການ.
- ເອົາຂອບເຂດແລະຄວາມຍາວຂອງແຜນທີ່ທັງຫມົດທີ່ທ່ານຕ້ອງການສະແດງດັ່ງທີ່ພວກເຮົາໄດ້ຮຽນມາໃນຂັ້ນຕອນທີ 2 ຂອງບົດຮຽນນີ້.
- ໃສ່ແຜນທີ່ຄັ້ງທໍາອິດດັ່ງທີ່ພວກເຮົາໄດ້ຮຽນໃນຂັ້ນຕອນທີ 3 ຂອງບົດຮຽນນີ້. ຖ້າທ່ານຕ້ອງການແຜນທີ່ໃຫ້ມີເຄື່ອງຫມາຍ, ໃຫ້ຕື່ມເຄື່ອງຫມາຍໃນຂັ້ນຕອນທີ 4.
- ສໍາລັບແຜນທີ່ຄັ້ງທີສອງ, ທ່ານຈໍາເປັນຕ້ອງເພີ່ມ 3 ເສັ້ນໃຫມ່ໃນ script initialize () ຂອງທ່ານ:
var latlng2 = new googlemapsLatLng ( second coordinates )
var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: googlemapsMapTypeIdROADMAP}
var map2 = new googlemapsMap (documentgetElementById ("map_canvas_2"), myOptions2) - ຖ້າທ່ານຕ້ອງການເຄື່ອງຫມາຍໃນແຜນທີ່ໃຫມ່ກໍ່ໃຫ້ເພີ່ມເຄື່ອງຫມາຍທີສອງຊີ້ຢູ່ທີ່ພິກັດທີສອງແລະແຜນທີ່ທີສອງ:
var myMarker2 = new googlemapsMarker ({position: latlng2 , map: map2 , title: " Title Marker "}) - ຫຼັງຈາກນັ້ນ, ຕື່ມການທີສອງ
ບ່ອນທີ່ທ່ານຕ້ອງການແຜນທີ່ຄັ້ງທີສອງ. ແລະໃຫ້ແນ່ໃຈວ່າໃຫ້ມັນເປັນ id = "map_canvas_2" ID.
- ເມື່ອຫນ້າຂອງທ່ານໂຫລດ, ສອງແຜນຈະສະແດງ
ນີ້ແມ່ນລະຫັດຂອງຫນ້າທີ່ມີສອງແຜນທີ່ກູໂກກ່ຽວກັບມັນ: