ພາບກາກໂປກພື້ນຖານ

ສ້າງພາຕະລາງ Google Maps ພື້ນຖານ

ບົດສະຫຼຸບນີ້ສ້າງພາຕະລາງ Google Maps ດ້ວຍສູນກາງຂອງລາຊັງລອນດອນ

ຄວາມຄິດທີ່ຕັ້ງຕັ້ງ

<!DOCTYPE html>
<html>
<body>
<h1>ພາຕະລາງຂອງຂ້ອຍຄັ້ງທຳອິດ</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

ຕໍ່ມາພວກເຮົາຈະຊອກຫາຫຼັກກິດຈະກຳທີ່ນີ້

ບໍລິສັດພາຕະລາງແລະຂະໜາດ

ພາຕະລາງຕ້ອງມີຫົວໜ້າ HTML ທີ່ຢູ່ໃນອາຄານ

<div id="googleMap" style="width:100%;height:400px"></div>

ຖ້ານັ້ນຍັງຕ້ອງຈັດຕັ້ງຂະໜາດຂອງພາຕະລາງ

ສ້າງຫົວຫນ້າສະແດງສະເພາະການຈັດຕັ້ງພາຕະລາງທາງການຈັດຕັ້ງການທາງທີ່

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp ຄວາມຄິດທີ່ກຳນົດປະສານການອອກມາ.

center ປະສົມປະສານການກຳນົດການຕັ້ງກາງຂອງການອອກມາ (ທີ່ນໍາໃຊ້ຄວາມກະຈາຍຢູ່ວຽງສັນນະພາບ).

zoom ປະສົມປະສານການກຳນົດລະດັບການຫຼຸດຂະໜາດຂອງການອອກມາ (ທົດລອງການຫຼຸດຂະໜາດຂອງການອອກມາ).

ບັງຄັບນີ້ເທື່ອ:

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

ມັນໃຊ້ຄຳຂັດແຍ່ງທີ່ສົ່ງຕົວ (mapProp) ສ້າງມາການອອກມາຂອງການອອກມາຂອງການອອກມາຂອງມາດຕະການ id="googleMap" <div>.

ຕາມຕົວຈຳນວນຫຼາຍ

ຕົວຢ່າງດັ່ງລຽງນີ້ອອກຄວາມຄິດຂອງຕາມຕົວຈຳນວນສີ່ບາງປະເພດຕາມຕົວຈຳນວນສີ່ບາງປະເພດ:

ຄວາມຄິດທີ່ຕັ້ງຕັ້ງ

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

API Key Google ສິນລະປະບັນ

Google ອະນຸຍາດໃຫ້ເວັບໄຊໂດຍສະເໝີທັງໝົດຂອງ Google API ໂດຍສະເໝີຄັ້ງຕໍ່ມື້ຫຼາຍພັນຄັ້ງ.

ຍັງຄົງທາງທີ່ຕ້ອງໄດ້ຂໍຄຳຂັດແຍ່ງ API Key:

https://developers.google.com/maps/documentation/javascript/get-api-key

ການອອກມາຂອງ Google Maps ຕ້ອງການຕິດຕັ້ງ API ໃນ: key ພົບຄູ່ວັດຖຸນີ້ໃນຄຳຂັດແຍ່ງ:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>