เรียนรู้วิธีการเพิ่ม Google แผนที่ไปยังหน้าเว็บ
หน้าเว็บพื้นฐาน
หน้าเว็บทั้งหมดจะถูกเขียนในรูปแบบ HTML
แสดงให้เห็นถึงวิธีการเพิ่ม Google แผนที่ไปยังหน้าเว็บเราจะใช้หน้าเว็บง่ายพื้นฐาน
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
ลองตัวเอง» ตั้งค่าขนาดแผนที่
กำหนดขนาดของแผนที่:
เพิ่ม Google API
การทำงานของแผนที่ที่ให้บริการโดยห้องสมุด JavaScript อยู่ที่ Google
ห้องสมุด JavaScript สามารถโหลดใน <head> ส่วนของหน้า HTML
ที่จริงคุณสามารถวาง <head> และ </head> แท็ก
สร้างแผนที่โดยใช้ JavaScript
สุดท้ายเพิ่ม JavaScript ที่จำเป็นไปยังหน้า:
ตัวอย่าง
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. LatLng() google.maps. LatLng()
สถานที่ให้บริการตั้งซูมถึง 10 (ลองทดสอบกับการซูม)
วัตถุ google.maps.Map ถูกสร้างขึ้นด้วย mapCanvas และ mapOptions เป็นพารามิเตอร์
ไปที่เรา สอน Google Maps API เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ Google แผนที่