พื้นฐานแผนภาพ Google
- หน้าก่อน เรื่องทั่วไปของ Maps
- หน้าต่อไป แผนภาพเสริม 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
) สร้างแผนที่ใหม่ในส่วน <div> ที่มี id="googleMap"
แผนที่หลายตัว
ตัวอย่างด้านล่างนี้กำหนดแผนที่สี่ชนิดแผนที่ต่างกัน:
ตัวอย่าง
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 Key ฟรี
Google อนุญาตให้เว็บไซต์เรียกใช้ Google API อย่างไม่มีค่า จำนวนหลายพันครั้งต่อวัน。
โปรดเข้าถึงลิงก์ด้านล่างเพื่อดูวิธีการได้รับ API key:
https://developers.google.com/maps/documentation/javascript/get-api-key
Google Maps ต้องมีความสามารถในการโหลด API ใน key
参数ฝากในนั้นค้นหา API ทัศน์เลขถูกต้อง:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
- หน้าก่อน เรื่องทั่วไปของ Maps
- หน้าต่อไป แผนภาพเสริม Maps