Google Maps คืออะไร?
Google Maps คือ Google API
Google Fonts คือ Google API
Google Charts คือ Google API
เรียนรู้วิธีเพิ่ม Google แผนที่ในหน้าเว็บของคุณ
อ๊ะ! อะไรบางอย่างผิดปกติ.
Google Map แรกของฉัน
เริ่มต้นด้วยหน้าเว็บง่ายๆ
เพิ่ม <div> องค์ประกอบที่คุณต้องการให้แผนที่แสดง และกำหนดขนาดของแผนที่:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:100%;height:400px;">My map will go here</div>
</body>
<html>
เพิ่มฟังก์ชัน JavaScript เพื่อแสดงแผนที่:
ตัวอย่าง
function myMap() {
var mapCanvas =
document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom:
10
};
var map = new google.maps.Map(mapCanvas,
mapOptions);
}
ตัวแปรmapCanvasเป็นองค์ประกอบ HTML ของแผนที่
ตัวแปรmapOptionsกำหนดคุณสมบัติของแผนที่
คุณสมบัติศูนย์ระบุตำแหน่งที่จะตั้งศูนย์กลางของแผนที่ (โดยใช้พิกัดละติจูดและลองจิจูด)
คุณสมบัติ การซูมระบุระดับการซูมสำหรับแผนที่ (ลองทดสอบด้วยระดับการซูม)
อ อบเจ็กต์ google.maps.Mapถูกสร้างขึ้นด้วย mapCanvas และ mapOptions เป็นพารามิเตอร์
สุดท้าย เพิ่ม Google API
ฟังก์ชันของแผนที่มีให้โดยไลบรารี JavaScript ที่ Google:
ตัวอย่าง
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
บทช่วยสอนของ Google แผนที่
เรียนรู้เพิ่มเติมเกี่ยวกับ Google Maps ใน บทช่วย สอน Google Mapsของ เรา