Google Maps Basic
สร้าง Google Map พื้นฐาน
ตัวอย่างนี้สร้าง Google Map ที่มีศูนย์กลางอยู่ที่ลอนดอน ประเทศอังกฤษ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</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กำหนดคุณสมบัติของแผนที่
คุณสมบัติศูนย์ระบุตำแหน่งที่จะตั้งศูนย์กลางของแผนที่ (โดยใช้พิกัดละติจูดและลองจิจูด)
คุณสมบัติ การซูมระบุระดับการซูมสำหรับแผนที่ (ลองทดสอบด้วยระดับการซูม)
บรรทัด: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); สร้างแผนที่ใหม่ภายในองค์ประกอบ <div> ด้วย id="googleMap" โดยใช้พารามิเตอร์ที่ส่งผ่าน (mapProp)
หลายแผนที่
ตัวอย่างด้านล่างกำหนดสี่แผนที่ด้วยประเภทแผนที่ที่แตกต่างกัน:
ตัวอย่าง
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);
คีย์ Google API ฟรี
Google อนุญาตให้เว็บไซต์เรียกใช้ Google API ใดๆ ได้ฟรี หลายพันครั้งต่อวัน
ไปที่ https://developers.google.com/maps/documentation/javascript/get-api-keyเพื่อเรียนรู้วิธีรับคีย์ API
Google Maps คาดว่าจะพบคีย์ API ใน พารามิเตอร์ คีย์เมื่อโหลด API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>