ภาพรวม

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

Maps JavaScript API ช่วยให้คุณปรับแต่งแผนที่ด้วยเนื้อหาและภาพของคุณเองเพื่อแสดงในหน้าเว็บและอุปกรณ์เคลื่อนที่ได้ Maps JavaScript API มีแผนที่พื้นฐาน 4 ประเภท (แผนกลยุทธ์ ดาวเทียม แบบผสม และภูมิประเทศ) ซึ่งคุณสามารถแก้ไขได้โดยใช้เลเยอร์และรูปแบบ การควบคุมและเหตุการณ์ รวมถึงบริการและไลบรารีต่างๆ

กลุ่มเป้าหมาย

เอกสารประกอบนี้ออกแบบมาสําหรับผู้ที่คุ้นเคยกับการจัดโปรแกรม JavaScript และแนวคิดการจัดโปรแกรมออบเจ็กต์ คุณควรทําความคุ้นเคยกับ Google Maps จากมุมมองของผู้ใช้ด้วย บทแนะนํา JavaScript จํานวนมากอยู่บนอินเทอร์เน็ต

เอกสารประกอบแนวคิดนี้ออกแบบมาเพื่อช่วยให้คุณเริ่มต้นสํารวจและพัฒนาแอปพลิเคชันได้อย่างรวดเร็วด้วย Maps JavaScript API เรายังเผยแพร่เอกสารอ้างอิง JavaScript API ด้วย

สวัสดี

วิธีที่ง่ายที่สุดในการเริ่มเรียนรู้เกี่ยวกับ Maps JavaScript API คือดูตัวอย่างง่ายๆ ตัวอย่างต่อไปนี้แสดงแผนที่ที่มีจุดศูนย์กลางอยู่ที่ซิดนีย์ รัฐนิวเซาท์เวลส์ ออสเตรเลีย

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
ดูตัวอย่าง

ลองใช้ตัวอย่าง

ในตัวอย่างง่ายๆ นี้ มีข้อควรทราบบางประการดังต่อไปนี้

  1. เราประกาศแอปพลิเคชันเป็น HTML5 โดยใช้การประกาศ <!DOCTYPE html>
  2. เราสร้างเอลิเมนต์ div ชื่อ "map" เพื่อเก็บแผนที่
  3. เรากําหนดฟังก์ชัน JavaScript ที่สร้างแผนที่ใน div
  4. เราโหลด Maps JavaScript API โดยใช้แท็ก script

โดยจะอธิบายขั้นตอนเหล่านี้ด้านล่าง

การประกาศแอปพลิเคชันของคุณเป็น HTML5

เราขอแนะนําให้คุณประกาศ DOCTYPE ที่แท้จริงในเว็บแอปพลิเคชัน ในตัวอย่างด้านล่าง เราประกาศว่าแอปพลิเคชันของเราเป็น HTML5 ที่ใช้ HTML5 แบบง่าย DOCTYPE ตามที่แสดงด้านล่าง

<!DOCTYPE html>

เบราว์เซอร์ปัจจุบันส่วนใหญ่จะแสดงเนื้อหาที่ประกาศด้วย DOCTYPE นี้ใน "โหมดมาตรฐาน" ซึ่งหมายความว่าแอปพลิเคชันของคุณควรเป็นไปตามข้อกําหนดในเบราว์เซอร์ต่างๆ มากขึ้น นอกจากนี้ DOCTYPE ยังได้รับการออกแบบให้ลดระดับอย่างค่อยเป็นค่อยไป เบราว์เซอร์ที่ไม่เข้าใจจะไม่สนใจเบราว์เซอร์นี้ และใช้ "โหมด Search Console" เพื่อแสดงเนื้อหาของตน

โปรดทราบว่า CSS บางรายที่ทํางานในโหมดแปลกๆ จะใช้ไม่ได้ในโหมดมาตรฐาน กล่าวอย่างเจาะจงคือ ขนาดตามเปอร์เซ็นต์ทั้งหมดต้องมาจากองค์ประกอบการบล็อกระดับบนสุด และหากมีบรรพบุรุษใดที่ระบุขนาดไม่สําเร็จ จะถือว่ามีขนาด 0 x 0 พิกเซล ด้วยเหตุนี้ เราจึงรวมการประกาศ <style> ต่อไปนี้

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

การประกาศ CSS นี้ระบุว่าคอนเทนเนอร์แผนที่ <div> (ที่มีรหัส map) ควรใช้พื้นที่เต็ม 100% ของเนื้อความ HTML โปรดทราบว่าเราต้องประกาศเปอร์เซ็นต์ดังกล่าวให้ชัดเจนสําหรับ <body> และ <html> ด้วย

กําลังโหลด Maps JavaScript API

ระบบโหลด Maps JavaScript API โดยใช้แท็ก script ซึ่งสามารถเพิ่มในบรรทัดได้ในไฟล์ HTML หรือใช้ไฟล์ JavaScript แยกต่างหาก เราขอแนะนําให้คุณตรวจสอบทั้ง 2 แนวทางและเลือกแนวทางที่เหมาะสมที่สุดสําหรับโครงสร้างของโค้ดในโปรเจ็กต์

การโหลดแบบในหน้า

หากต้องการโหลด Maps JavaScript API ในบรรทัดในไฟล์ HTML ให้เพิ่มแท็ก script ดังที่แสดงด้านล่าง

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

การโหลดแบบไดนามิก

หากต้องการโหลด Maps JavaScript API ในหน้าแบบไดนามิกโดยใช้ไฟล์ JavaScript แยกต่างหาก ดูตัวอย่างด้านล่าง วิธีนี้จะช่วยให้คุณจัดการโค้ดทั้งหมดสําหรับการใช้งาน API จากไฟล์ .js แยกต่างหากได้ และเทียบเท่ากับการเพิ่มแท็กในหน้า

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);
      

การโหลดแบบไดนามิก

แพ็กเกจ @googlemaps/js-api-loader พร้อมให้ใช้งานเพื่อให้การโหลดแบบไดนามิกเป็นไปอย่างราบรื่นมากขึ้น คุณติดตั้งอุปกรณ์ผ่าน NPM ได้ด้วยอุปกรณ์ต่อไปนี้

npm install @googlemaps/js-api-loader

สามารถนําเข้าแพ็กเกจนี้ไปยังแอปพลิเคชันพร้อม:

import { Loader } from "@googlemaps/js-api-loader"

ตัวโหลดจะแสดงอินเทอร์เฟซสําหรับ Promise และ Callback ข้อมูลต่อไปนี้สาธิตวิธีใช้เมธอด Promise เริ่มต้น load()

TypeScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

JavaScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

แอตทริบิวต์แท็กสคริปต์

โปรดสังเกตในตัวอย่างข้างต้นว่าแอตทริบิวต์หลายรายการได้รับการตั้งค่าในแท็ก script ซึ่งแนะนํา ต่อไปนี้เป็นคําอธิบายสําหรับแอตทริบิวต์แต่ละรายการ

  • src: URL ที่มีการโหลด Maps JavaScript API รวมถึงสัญลักษณ์และคําจํากัดความทั้งหมดที่จําเป็นในการใช้ Maps JavaScript API URL ในตัวอย่างนี้มีพารามิเตอร์ 2 ตัว ได้แก่ key ที่คุณให้คีย์ API และ callback ซึ่งคุณระบุชื่อของฟังก์ชันส่วนกลางที่จะเรียกใช้เมื่อ Maps JavaScript API โหลดจนเสร็จสมบูรณ์ อ่านเพิ่มเติมเกี่ยวกับพารามิเตอร์ของ URL
  • async: ขอให้เบราว์เซอร์ดาวน์โหลดและเรียกใช้สคริปต์แบบไม่พร้อมกัน เมื่อเรียกใช้สคริปต์ ระบบจะเรียกใช้ฟังก์ชันที่ระบุโดยใช้พารามิเตอร์ callback

ห้องสมุด

เมื่อโหลด Maps JavaScript API ผ่าน URL คุณอาจเลือกโหลดไลบรารีเพิ่มเติมผ่านการใช้พารามิเตอร์ของ URL libraries ไลบรารีเป็นโมดูลของโค้ดที่มีฟังก์ชันเพิ่มเติมให้กับ Maps JavaScript API หลัก แต่ไม่ได้โหลดเว้นแต่คุณจะขออย่างเจาะจง ดูข้อมูลเพิ่มเติมได้จากไลบรารีใน Maps JavaScript API

กําลังโหลด API แบบพร้อมกัน

ในแท็ก script ที่โหลด Maps JavaScript API คุณอาจละเว้นแอตทริบิวต์ defer และพารามิเตอร์ callback ได้ ซึ่งจะทําให้การโหลด API ถูกบล็อกจนกว่าจะมีการดาวน์โหลด API

การดําเนินการนี้อาจทําให้การโหลดหน้าเว็บช้าลง แต่หมายความว่าคุณสามารถเขียนแท็กสคริปต์ที่ตามมา สมมติว่าโหลด API ไว้แล้ว

แมปองค์ประกอบ DOM

<div id="map"></div>

เราต้องแสดงสถานที่เพื่อสร้างแผนที่ในหน้าเว็บ โดยทั่วไปแล้ว เราสร้างองค์ประกอบที่มีชื่อ div และได้รับการอ้างอิงองค์ประกอบนี้ในรูปแบบออบเจ็กต์เอกสาร (DOM) ของเบราว์เซอร์

ในตัวอย่างข้างต้น เราใช้ CSS เพื่อกําหนดความสูงของ div ของแผนที่เป็น "100%" การดําเนินการนี้จะขยายให้พอดีกับขนาดอุปกรณ์เคลื่อนที่ คุณอาจต้องปรับค่าความกว้างและความสูงตามขนาดหน้าจอและระยะห่างจากขอบของเบราว์เซอร์ โปรดทราบว่า div มักจะใช้ความกว้างจากองค์ประกอบที่มี div ที่เป็นค่าว่างซึ่งมี 0 โดยปกติ ด้วยเหตุนี้ คุณต้องตั้งค่าความสูงบน <div> อย่างชัดแจ้งเสมอ

ตัวเลือกแผนที่

คุณมี 2 ตัวเลือกที่จําเป็นสําหรับแผนที่ทั้งหมด ได้แก่ center และ zoom

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

ระดับการซูม

ความละเอียดเริ่มต้นที่จะแสดงแผนที่นั้นกําหนดโดยพร็อพเพอร์ตี้ zoom โดยที่การซูม 0 จะสอดคล้องกับแผนที่ Earth ที่ซูมออกโดยสมบูรณ์ และการซูมที่มีขนาดใหญ่ขึ้นจะซูมเข้าที่ความละเอียดที่สูงขึ้น

zoom: 8

การนําเสนอแผนที่ทั้งโลกเป็นรูปภาพเดียวก็ต้องใช้แผนที่ขนาดใหญ่หรือแผนที่ขนาดเล็กที่มีความละเอียดต่ํามาก ดังนั้นรูปภาพแผนที่ใน Google Maps และ Maps JavaScript API จึงแบ่งออกเป็น "ชิ้นส่วน" แผนที่และ "ระดับการซูม" ที่ระดับการซูมต่ําๆ ชิ้นส่วนแผนที่ จํานวนเล็กน้อยจะครอบคลุมพื้นที่กว้าง ที่ระดับการซูมที่สูงขึ้น ชิ้นส่วนจะมีความละเอียดสูงขึ้น และครอบคลุมพื้นที่ที่เล็กลง ระดับรายละเอียดโดยประมาณที่คุณคาดว่าจะเห็นในแต่ละระดับการซูมมีดังนี้

  • 1: โลก
  • 5: ผืนดิน/ทวีป
  • 10: เมือง
  • 15: ถนน
  • 20: อาคาร

รูปภาพ 3 รูปต่อไปนี้แสดงสถานที่เดียวกันของโตเกียวที่ระดับการซูม 0, 7 และ 18

ดูข้อมูลเกี่ยวกับวิธีที่ Maps JavaScript API โหลดชิ้นส่วนข้อมูลตามระดับการซูมปัจจุบันได้จากคู่มือเกี่ยวกับพิกัดแผนที่และไทล์

ออบเจ็กต์แผนที่

map = new google.maps.Map(document.getElementById("map"), {...});

คลาส JavaScript ที่แสดงถึงแผนที่คือคลาส Map ออบเจ็กต์ของคลาสนี้จะกําหนดแผนที่เดียวในหน้าเว็บ (คุณอาจสร้างอินสแตนซ์ของคลาสได้มากกว่า 1 รายการ ออบเจ็กต์แต่ละรายการจะกําหนดแผนที่แยกต่างหากในหน้า) เราสร้างอินสแตนซ์ใหม่ของคลาสโดยใช้โอเปอเรเตอร์ new ของ JavaScript

เมื่อสร้างอินสแตนซ์แผนที่ใหม่ คุณจะต้องระบุองค์ประกอบ HTML <div> ในหน้าเป็นคอนเทนเนอร์สําหรับแผนที่ โหนด HTML เป็นออบเจ็กต์ย่อยของออบเจ็กต์ JavaScript document และเราได้รับการอ้างอิงถึงองค์ประกอบนี้ผ่านเมธอด document.getElementById()

โค้ดนี้จะกําหนดตัวแปร (ชื่อ map) และกําหนดตัวแปรนั้นให้กับออบเจ็กต์ Map ใหม่ ฟังก์ชัน Map() เรียกว่าเครื่องมือสร้าง และแสดงคํานิยามไว้ด้านล่าง

ผู้ผลิต คำอธิบาย
Map(mapDiv:Node, opts?:MapOptions ) สร้างแผนที่ใหม่ภายในคอนเทนเนอร์ HTML ที่ให้ไว้ ซึ่งโดยปกติจะเป็นองค์ประกอบ DIV โดยใช้พารามิเตอร์ (ไม่บังคับ) ที่ส่งผ่าน

การแก้ปัญหา

คีย์ API และข้อผิดพลาดในการเรียกเก็บเงิน

ในบางกรณี ระบบอาจแสดงแผนที่สีเข้มหรือรูปภาพ Street View ที่ "เชิงลบ" และมีลายน้ําที่มีข้อความ "เพื่อการพัฒนาเท่านั้น" ลักษณะการทํางานเช่นนี้มักจะบ่งบอกถึงปัญหาเกี่ยวกับคีย์ API หรือการเรียกเก็บเงิน หากต้องการใช้ผลิตภัณฑ์ Google Maps Platform คุณจะต้องเปิดใช้การเรียกเก็บเงินในบัญชี และคําขอทั้งหมดต้องมีคีย์ API ที่ถูกต้อง ขั้นตอนต่อไปนี้จะช่วยแก้ปัญหานี้ได้

หากรหัสใช้งานไม่ได้

Brendan Kenny และ Mano Marks มาช่วยอธิบายโค้ดแผนที่ให้พร้อมใช้งานและชี้ให้เห็นข้อผิดพลาดที่พบบ่อยและวิธีแก้ไขในวิดีโอนี้

  • มองหาการพิมพ์ผิด โปรดทราบว่า JavaScript คือภาษาที่คํานึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
  • ตรวจสอบข้อมูลพื้นฐาน - ปัญหาที่พบบ่อยที่สุดบางส่วนในการสร้างแผนที่เริ่มต้น เช่น
    • ตรวจสอบว่าคุณได้ระบุพร็อพเพอร์ตี้ zoom และ center ในตัวเลือกแผนที่แล้ว
    • ตรวจสอบว่าคุณได้ประกาศองค์ประกอบ div ที่แผนที่จะปรากฏบนหน้าจอ
    • ตรวจสอบว่าองค์ประกอบ div สําหรับแผนที่มีความสูง โดยค่าเริ่มต้น องค์ประกอบ div จะสร้างขึ้นโดยมีความสูงเป็น 0 จึงมองไม่เห็น
    ดูตัวอย่างของเราสําหรับการใช้งานข้อมูลอ้างอิง
  • ใช้โปรแกรมแก้ไขข้อบกพร่อง JavaScript เพื่อช่วยระบุปัญหา เช่น เครื่องมือที่มีให้ใช้งานในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome เริ่มด้วยการมองหาข้อผิดพลาดในคอนโซล JavaScript
  • โพสต์คําถามไปยัง Stack Overflow ดูหลักเกณฑ์เกี่ยวกับวิธีโพสต์คําถามดีๆ ได้ในหน้าการสนับสนุน