Google Maps พื้นฐาน

สร้างแผนที่พื้นฐานของ Google

ตัวอย่างนี้สร้างแผนที่ Google ศูนย์กลางในกรุงลอนดอนประเทศอังกฤษ:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>

ลองตัวเอง»

ส่วนที่เหลือของหน้านี้อธิบายตัวอย่างข้างต้นทีละขั้นตอน

1. ใสของ Google API

Google แผนที่ API เป็นห้องสมุด JavaScript จะสามารถเพิ่มไปยังหน้าเว็บที่มี <script> แท็ก:

2. ชุดแผนที่คุณสมบัติ

สร้างฟังก์ชั่นในการเริ่มต้นแผนที่:

function initialize() {
}

ในฟังก์ชั่นเริ่มต้นการสร้างวัตถุ (mapProp) เพื่อกำหนดคุณสมบัติของแผนที่:

var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

สถานที่ให้บริการศูนย์ระบุตำแหน่งที่จะอยู่ตรงกลางแผนที่ สร้างวัตถุละติจูดลองจิจูดที่จะมีจุดศูนย์กลางอยู่ที่จุดที่เฉพาะเจาะจง ผ่านพิกัดในการสั่งซื้อ: เส้นรุ้งเส้นแวง

คุณสมบัติการซูมระบุระดับการซูมสำหรับแผนที่ ซูม: 0 แสดงแผนที่ของโลกซูมออกอย่างเต็มที่ สูงกว่าระดับการซูมซูมในที่ความละเอียดสูง

คุณสมบัติ MapTypeId ระบุประเภทแผนที่เพื่อแสดง ประเภทแผนที่ดังต่อไปนี้ได้รับการสนับสนุน:

ROADMAP (normal, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)

3. สร้างแผนที่คอนเทนเนอร์

สร้าง <div> องค์ประกอบที่จะถือแผนที่ ใช้ CSS ขนาดองค์ประกอบ:

แผนที่จะเสมอ "inherit" ขนาดของมันจากองค์ประกอบภาชนะที่ใช้บรรจุ

4. สร้างวัตถุแผนที่

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

โค้ดข้างต้นจะสร้างแผนที่ใหม่ภายใน <div> องค์ประกอบที่มี id = "GoogleMap" โดยใช้พารามิเตอร์ที่จะถูกส่งผ่าน (mapProp)

5. เพิ่มฟังเหตุการณ์การโหลดแผนที่

เพิ่มฟัง DOM ที่จะดำเนินการ initialize() ฟังก์ชั่นในการโหลดหน้าต่าง (when the page is loaded) :

google.maps.event.addDomListener(window, 'load', initialize);

ถ่ายทอดสดโหลด

นอกจากนี้ยังเป็นไปได้ที่จะโหลดของ Google Maps API ตามความต้องการ

ตัวอย่างด้านล่างใช้ window.onload โหลด Google Maps API หลังหน้ามีแปล้

loadScript() ฟังก์ชั่นสร้าง Google Maps API <script> แท็ก นอกจากนี้การเรียกกลับ = พารามิเตอร์เริ่มต้นถูกเพิ่มเข้าไปในส่วนท้ายของ URL ที่จะดำเนินการที่ initialize() ฟังก์ชั่นหลังจาก API เป็นแปล้:

ตัวอย่าง

function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

ลองตัวเอง»

หลายแผนที่

ตัวอย่างด้านล่างกำหนดสี่แผนที่บนหน้าเว็บหนึ่ง (สี่แผนที่ที่มีประเภทแผนที่ที่แตกต่างกัน):

ตัวอย่าง

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);

ลองตัวเอง»

คีย์ API ของ Google

Google ช่วยให้เว็บไซต์ของคุณเพื่อเรียกร้องใด ๆ ของ Google API หลายพันครั้งต่อวัน

ถ้าคุณวางแผนสำหรับการจราจรหนักที่คุณควรจะได้รับคีย์ API ฟรีจาก Google

ไปที่ https://console.developers.google.com ที่จะได้รับคีย์ฟรี

Google แผนที่คาดว่าจะพบคีย์ API ในพารามิเตอร์สำคัญเมื่อโหลด API:

❮ก่อนหน้า ถัดไปบท❯