ວິທີເພີ່ມແຜນທີ່ກູໂກໃນຫນ້າເວັບຂອງທ່ານ

01 of 05

ໄດ້ຮັບຫຼັກ API ຂອງ Google Maps ສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ

ເບິ່ງເມຄຂອງ Google Developers Console. Screen shot by J Kyrnin

ວິທີທີ່ດີທີ່ສຸດທີ່ຈະເພີ່ມແຜນທີ່ Google ໃນເວັບໄຊທ໌ຂອງທ່ານແມ່ນການໃຊ້ Google Maps API. ແລະ Google ແນະນໍາໃຫ້ທ່ານໄດ້ຮັບຫຼັກ API ໃນການນໍາໃຊ້ແຜນທີ່.

ທ່ານບໍ່ຈໍາເປັນຕ້ອງໄດ້ຮັບຄີ API ເພື່ອນໍາໃຊ້ Google Maps API v3, ແຕ່ມັນມີປະໂຫຍດຫຼາຍເພາະມັນຊ່ວຍໃຫ້ທ່ານຕິດຕາມການໃຊ້ງານຂອງທ່ານແລະຈ່າຍຄ່າການເຂົ້າເຖິງເພີ່ມເຕີມ. Google Maps API v3 ມີຄໍາຖາມ 1 ຄໍາຮ້ອງຂໍຕໍ່ວິນາທີຕໍ່ຜູ້ໃຊ້ສູງສຸດເຖິງ 25,000 ຄໍາຮ້ອງທຸກຕໍ່ມື້. ຖ້າຫນ້າຂອງທ່ານເກີນຄວາມຈໍາກັດເຫຼົ່ານັ້ນທ່ານຈະຕ້ອງເປີດການເອີ້ນເກັບເງິນເພື່ອໃຫ້ໄດ້ຮັບຫຼາຍກວ່ານີ້.

ວິທີການຮັບຄີ Google Maps API

  1. ເຂົ້າສູ່ລະບົບກັບ Google ໂດຍໃຊ້ບັນຊີ Google ຂອງທ່ານ.
  2. ໄປທີ່ຄອນໂຊນພັດທະນາ
  3. ເລື່ອນໄປຫາບັນຊີແລະຊອກຫາ Google Maps API v3 ແລ້ວກົດປຸ່ມ "OFF" ເພື່ອເປີດມັນ.
  4. ອ່ານແລະຍອມຮັບຂໍ້ຕະກະລົງ.
  5. ໄປທີ່ console APIs ແລະເລືອກ "API Access" ຈາກເມນູດ້ານຊ້າຍ
  6. ໃນສ່ວນ "ການເຂົ້າເຖິງງ່າຍດາຍ API", ໃຫ້ຄລິກໃສ່ປຸ່ມ "ສ້າງໃຫມ່ເຄື່ອງແມ່ຂ່າຍ ... ".
  7. ກະລຸນາໃສ່ທີ່ຢູ່ IP ຂອງເຄື່ອງແມ່ຂ່າຍຂອງທ່ານ. ນີ້ແມ່ນ IP ທີ່ການຮ້ອງຂໍແຜນທີ່ຂອງທ່ານຈະມາຈາກ. ຖ້າທ່ານບໍ່ຮູ້ທີ່ຢູ່ IP ຂອງທ່ານ, ທ່ານສາມາດເບິ່ງມັນໄດ້.
  8. ຄັດລອກຂໍ້ຄວາມກ່ຽວກັບ "ຄີ API:" (ບໍ່ລວມຫົວຂໍ້ນັ້ນ). ນີ້ແມ່ນຫຼັກ API ຂອງທ່ານສໍາລັບແຜນທີ່ຂອງທ່ານ.

02 of 05

ປ່ຽນທີ່ຢູ່ຂອງທ່ານໄປຫາພິກັດ

ໃຊ້ຕົວເລກທີ່ລະບຸໄວ້ໃນລະດັບຄວາມຍາວແລະຄວາມຍາວ. Screen shot by J Kyrnin

ເພື່ອໃຊ້ Google Maps ໃນຫນ້າເວັບຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງມີຄວາມຍາວແລະຄວາມຍາວຂອງສະຖານທີ່. ທ່ານສາມາດໄດ້ຮັບເຫຼົ່ານີ້ຈາກ GPS ຫຼືທ່ານສາມາດໃຊ້ເຄື່ອງມືອອນໄລນ໌ເຊັ່ນ Geocoder.us ເພື່ອບອກທ່ານ.

  1. ໄປ Geocoder.us ແລະພິມໃນທີ່ຢູ່ຂອງທ່ານໃນກ່ອງຊອກຫາ.
  2. ຄັດລອກຫມາຍເລກທໍາອິດສໍາລັບ latitude (ໂດຍບໍ່ມີຕົວອັກສອນຢູ່ທາງຫນ້າ) ແລະວາງມັນລົງໃນໄຟລ໌ຂໍ້ຄວາມ. ທ່ານບໍ່ຕ້ອງການຕົວຊີ້ວັດ (º).
  3. ຄັດລອກຫມາຍເລກທໍາອິດສໍາລັບໄລຍະຍາວ (ອີກເທື່ອຫນຶ່ງໂດຍບໍ່ມີຕົວອັກສອນຢູ່ທາງຫນ້າ) ແລະວາງມັນລົງໃນໄຟລ໌ຂໍ້ຄວາມຂອງທ່ານ.

ຄວາມຍາວແລະຄວາມຍາວຂອງທ່ານຈະມີລັກສະນະເຊັ່ນ:

40756076
-73990838

Geocoder.us ເຮັດວຽກພຽງແຕ່ສໍາລັບທີ່ຢູ່ອາເມລິກາ, ຖ້າທ່ານຕ້ອງການຫາຈຸດປະສານງານຢູ່ໃນປະເທດອື່ນ, ທ່ານຄວນຊອກຫາເຄື່ອງມືທີ່ຄ້າຍຄືກັນຢູ່ໃນຂົງເຂດຂອງທ່ານ.

03 of 05

ເພີ່ມແຜນທີ່ເວັບຫນ້າຂອງທ່ານ

Google Maps. ຫນ້າຈໍໂດຍ J Kyrnin - ແຜນທີ່ຮູບພາບທີ່ເຫມາະສົມ Google

ຫນ້າທໍາອິດ, ຕື່ມແຜນທີ່ສະແກນກັບ

ຂອງເອກະສານຂອງທ່ານ

ເປີດຫນ້າເວັບຂອງທ່ານແລະເພີ່ມດັ່ງຕໍ່ໄປນີ້ຫົວຂອງເອກະສານຂອງທ່ານ.

ປ່ຽນສ່ວນທີ່ໄດ້ເນັ້ນໃສ່ກັບຈໍານວນ latitude ແລະ longitude ທີ່ທ່ານຂຽນໄວ້ໃນຂັ້ນຕອນທີສອງ.

ຄັ້ງທີສອງ, ຕື່ມແຜນທີ່ອົງປະກອບຂອງແຜນທີ່ຂອງທ່ານ

ເມື່ອທ່ານມີອົງປະກອບສະຄິບທັງຫມົດເພີ່ມໃສ່ HEAD ຂອງເອກະສານຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງຈັດວາງແຜນທີ່ຂອງທ່ານໃນຫນ້າເວັບ. ທ່ານເຮັດສິ່ງນີ້ໂດຍການເພີ່ມອົງປະກອບ DIV ທີ່ມີ id = "map-canvas" attribute. ຂ້າພະເຈົ້າແນະນໍາໃຫ້ທ່ານສະແດງແບບນີ້ດ້ວຍຄວາມກວ້າງແລະຄວາມສູງທີ່ເຫມາະສົມກັບຫນ້າຂອງທ່ານ:

ສຸດທ້າຍ, ອັບໂຫລດແລະທົດສອບ

ສິ່ງສຸດທ້າຍທີ່ຕ້ອງເຮັດຄືການອັບໂຫລດຫນ້າເວັບແລະການທົດສອບທີ່ສະແດງແຜນທີ່ຂອງທ່ານ. ນີ້ແມ່ນຕົວຢ່າງຂອງແຜນທີ່ Google ໃນຫນ້ານີ້. ຫມາຍເຫດ, ເນື່ອງຈາກວ່າວິທີການເຮັດວຽກ About.com CMS, ທ່ານຈະຕ້ອງກົດການເຊື່ອມຕໍ່ເພື່ອໃຫ້ແຜນທີ່ຈະປາກົດ. ນີ້ຈະບໍ່ເປັນກໍລະນີໃນຫນ້າຂອງທ່ານ.

ຖ້າແຜນທີ່ຂອງທ່ານບໍ່ສະແດງໃຫ້ເຫັນ, ລອງເລີ່ມຕົ້ນມັນດ້ວຍຄຸນສົມບັດ BODY:

onload = "initialize ()" >

ສິ່ງອື່ນທີ່ຈະກວດສອບວ່າແຜນຂອງທ່ານບໍ່ປະກອບມີ:

04 of 05

ເພີ່ມເຄື່ອງຫມາຍໃນແຜນທີ່ຂອງທ່ານ

Google Map with marker. ຫນ້າຈໍໂດຍ J Kyrnin - ແຜນທີ່ຮູບພາບທີ່ເຫມາະສົມ Google

ແຕ່ສິ່ງທີ່ດີແມ່ນແຜນທີ່ຂອງສະຖານທີ່ຂອງທ່ານຖ້າບໍ່ມີເຄື່ອງຫມາຍບອກຄົນທີ່ພວກເຂົາຄວນໄປຢູ່ບໍ?

ເພື່ອເພີ່ມເຄື່ອງຫມາຍສີແດງມາດຕະຖານຂອງ 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 ຂອງຂ້ອຍ, ທ່ານຈະສັງເກດເຫັນວ່າຂ້ອຍມີແຜນທີ່ຫຼາຍກວ່າຫນຶ່ງທີ່ສະແດງຢູ່ໃນຫນ້ານີ້. ນີ້ແມ່ນງ່າຍທີ່ສຸດທີ່ຈະເຮັດ. ນີ້ແມ່ນວິທີການ.

  1. ເອົາຂອບເຂດແລະຄວາມຍາວຂອງແຜນທີ່ທັງຫມົດທີ່ທ່ານຕ້ອງການສະແດງດັ່ງທີ່ພວກເຮົາໄດ້ຮຽນມາໃນຂັ້ນຕອນທີ 2 ຂອງບົດຮຽນນີ້.
  2. ໃສ່ແຜນທີ່ຄັ້ງທໍາອິດດັ່ງທີ່ພວກເຮົາໄດ້ຮຽນໃນຂັ້ນຕອນທີ 3 ຂອງບົດຮຽນນີ້. ຖ້າທ່ານຕ້ອງການແຜນທີ່ໃຫ້ມີເຄື່ອງຫມາຍ, ໃຫ້ຕື່ມເຄື່ອງຫມາຍໃນຂັ້ນຕອນທີ 4.
  3. ສໍາລັບແຜນທີ່ຄັ້ງທີສອງ, ທ່ານຈໍາເປັນຕ້ອງເພີ່ມ 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)
  4. ຖ້າທ່ານຕ້ອງການເຄື່ອງຫມາຍໃນແຜນທີ່ໃຫມ່ກໍ່ໃຫ້ເພີ່ມເຄື່ອງຫມາຍທີສອງຊີ້ຢູ່ທີ່ພິກັດທີສອງແລະແຜນທີ່ທີສອງ:
    var myMarker2 = new googlemapsMarker ({position: latlng2 , map: map2 , title: " Title Marker "})
  5. ຫຼັງຈາກນັ້ນ, ຕື່ມການທີສອງ

    ບ່ອນທີ່ທ່ານຕ້ອງການແຜນທີ່ຄັ້ງທີສອງ. ແລະໃຫ້ແນ່ໃຈວ່າໃຫ້ມັນເປັນ id = "map_canvas_2" ID.

  6. ເມື່ອຫນ້າຂອງທ່ານໂຫລດ, ສອງແຜນຈະສະແດງ

ນີ້ແມ່ນລະຫັດຂອງຫນ້າທີ່ມີສອງແຜນທີ່ກູໂກກ່ຽວກັບມັນ: