ประกาศ: รูปแบบแผนที่ฐานใหม่จะพร้อมให้บริการใน Google Maps Platform เร็วๆ นี้ การอัปเดตรูปแบบแผนที่นี้ประกอบด้วยชุดสีเริ่มต้นใหม่ หมุดที่ทันสมัยขึ้น และการปรับปรุงประสบการณ์การใช้งานแผนที่และความสามารถในการใช้งาน รูปแบบแผนที่ทั้งหมดจะอัปเดตโดยอัตโนมัติในเดือนมีนาคม 2025 ดูข้อมูลเพิ่มเติมเกี่ยวกับความพร้อมให้บริการและวิธีเลือกใช้ก่อนหน้านี้ได้ที่รูปแบบแผนที่ใหม่สำหรับ Google Maps Platform

หน้านี้ได้รับการแปลโดย Cloud Translation API

เพิ่ม Google Maps ที่มีเครื่องหมายโดยใช้ JavaScript

บทนำ

บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ Google แบบง่ายที่มีเครื่องหมายลงในหน้าเว็บ เหมาะสำหรับผู้ที่มีพื้นฐานหรือความรู้ระดับกลางเกี่ยวกับ HTML และ CSS รวมถึงมีความรู้ด้าน JavaScript เพียงเล็กน้อย

ด้านล่างนี้คือแผนที่ที่คุณสร้างโดยใช้บทแนะนำนี้ เครื่องหมายตั้งอยู่ที่ Uluru (หรือที่เรียกว่า Ayers Rock) ในอุทยานแห่งชาติ Uluru-Kata Tjuta

เริ่มต้นใช้งาน

การสร้างแผนที่ Google ที่มีเครื่องหมายในหน้าเว็บมี 3 ขั้นตอนดังนี้

รับคีย์ API
สร้างหน้า HTML
เพิ่มแผนที่ที่มีเครื่องหมาย

คุณต้องมีเว็บเบราว์เซอร์ เลือกเบราว์เซอร์ที่เป็นที่รู้จัก เช่น Google Chrome (แนะนำ) Firefox, Safari หรือ Edge โดยอิงตามแพลตฟอร์มของคุณจากรายการเบราว์เซอร์ที่รองรับ

ขั้นตอนที่ 1: รับคีย์ API

ส่วนนี้จะอธิบายวิธีตรวจสอบสิทธิ์แอปกับ Maps JavaScript API โดยใช้คีย์ API ของคุณเอง

ทําตามขั้นตอนต่อไปนี้เพื่อรับคีย์ API

ไปที่คอนโซล Google Cloud
สร้างหรือเลือกโปรเจ็กต์
คลิกต่อไปเพื่อเปิดใช้ API และบริการที่เกี่ยวข้อง
ในหน้าข้อมูลเข้าสู่ระบบ ให้รับคีย์ API (และตั้งค่าข้อจำกัดของคีย์ API) หมายเหตุ: หากมีคีย์ API ที่ไม่มีข้อจำกัดหรือคีย์ที่มีการจำกัดเบราว์เซอร์อยู่แล้ว คุณจะใช้คีย์นั้นได้
หากต้องการป้องกันการขโมยโควต้าและรักษาคีย์ API ให้ปลอดภัย โปรดดูหัวข้อการใช้คีย์ API
เปิดใช้การเรียกเก็บเงิน ดูข้อมูลเพิ่มเติมได้ที่การใช้งานและการเรียกเก็บเงิน

เมื่อได้รับคีย์ API แล้ว ให้เพิ่มลงในข้อมูลโค้ดต่อไปนี้โดยคลิก "YOUR_API_KEY" คัดลอกและวางแท็กสคริปต์ Bootloader เพื่อใช้ในหน้าเว็บของคุณเอง

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

ขั้นตอนที่ 2: สร้างหน้า HTML

โค้ดสำหรับหน้าเว็บ HTML พื้นฐานมีดังนี้

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

โปรดทราบว่านี่เป็นหน้าเว็บพื้นฐานที่มีส่วนหัวระดับ 3 (h3) และองค์ประกอบ div รายการเดียว คุณสามารถเพิ่มเนื้อหาใดก็ได้ลงในหน้าเว็บ

ทําความเข้าใจโค้ด

ในระยะนี้ในตัวอย่างนี้ เรามี

ประกาศแอปพลิเคชันเป็น HTML5 โดยใช้ประกาศ !DOCTYPE html
สร้างองค์ประกอบ div ชื่อ "map" เพื่อเก็บแผนที่
โหลด Maps JavaScript API โดยใช้โปรแกรมโหลด Bootstrap

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

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

<!DOCTYPE html>

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

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

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

สร้างองค์ประกอบ div

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

โค้ดด้านล่างจะกำหนดพื้นที่ของหน้าเว็บสำหรับ Google Maps

<!--The div element for the map -->
<div id="map"></div>

ในขั้นตอนนี้ของบทแนะนำ div จะปรากฏเป็นบล็อกสีเทาเท่านั้น เนื่องจากคุณยังไม่ได้เพิ่มแผนที่ โค้ดด้านล่างอธิบาย CSS ที่กำหนดขนาดและสีของ div

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

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

โหลด Maps JavaScript API

โปรแกรมโหลด Bootstrap จะเตรียม Maps JavaScript API เพื่อโหลด (ระบบจะไม่โหลดไลบรารีจนกว่าจะมีการเรียกใช้ importLibrary())

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

ดูวิธีการรับคีย์ API ของคุณเองได้ที่ขั้นตอนที่ 3: รับคีย์ API

ขั้นตอนที่ 3: เพิ่มแผนที่ที่มีเครื่องหมาย

ส่วนนี้จะแสดงวิธีโหลด Maps JavaScript API ลงในหน้าเว็บ และวิธีเขียน JavaScript ของคุณเองที่ใช้ API เพื่อเพิ่มแผนที่ที่มีเครื่องหมาย

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

ในโค้ดด้านบน ระบบจะโหลดไลบรารี Map และ AdvancedMarkerElement เมื่อเรียกใช้ฟังก์ชัน initMap()

ทําความเข้าใจโค้ด

ในขั้นตอนนี้ของบทแนะนำ เรามีสิ่งต่อไปนี้

กำหนดฟังก์ชัน JavaScript ที่สร้างแผนที่ใน div
สร้าง AdvancedMarkerElement เพื่อเพิ่มเครื่องหมายลงในแผนที่

เพิ่มแผนที่

โค้ดด้านล่างจะสร้างออบเจ็กต์ Google Maps ใหม่ และเพิ่มพร็อพเพอร์ตี้ลงในแผนที่ ซึ่งรวมถึงจุดศูนย์กลางและระดับการซูม ดูตัวเลือกพร็อพเพอร์ตี้อื่นๆในเอกสารประกอบ

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});
index.js

แผนที่ทุกรายการต้องมี 2 ตัวเลือก ได้แก่ center และ zoom ในโค้ดข้างต้น new Map() จะสร้างออบเจ็กต์ Google Maps ใหม่ พร็อพเพอร์ตี้ center จะบอก API ว่าให้จัดกึ่งกลางแผนที่ที่ใด

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

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

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

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

เพิ่มเครื่องหมาย

โค้ดด้านล่างจะวางเครื่องหมายบนแผนที่ พร็อพเพอร์ตี้ position จะกำหนดตำแหน่งของเครื่องหมาย

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});index.js

โค้ดตัวอย่างที่สมบูรณ์

ดูโค้ดตัวอย่างที่สมบูรณ์ได้ที่นี่

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

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;
}
style.css

HTML

<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>index.html

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

JSFiddle.net Google Cloud Shell

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องหมาย

เคล็ดลับและการแก้ปัญหา

ดูข้อมูลเพิ่มเติมเกี่ยวกับการดูพิกัดละติจูด/ลองจิจูด หรือการเปลี่ยนที่อยู่เป็นพิกัดทางภูมิศาสตร์
คุณปรับแต่งตัวเลือกต่างๆ เช่น สไตล์และพร็อพเพอร์ตี้ เพื่อปรับแต่งแผนที่ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งแผนที่ได้ในคำแนะนำเกี่ยวกับการจัดรูปแบบและการวาดบนแผนที่
ใช้คอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเว็บเบราว์เซอร์เพื่อทดสอบและเรียกใช้โค้ด อ่านรายงานข้อผิดพลาด และแก้ปัญหาเกี่ยวกับโค้ด
ใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อเปิดคอนโซลใน Chrome
Command+Option+J (ใน Mac) หรือ Control+Shift+J (ใน Windows)
ทําตามขั้นตอนด้านล่างเพื่อดูพิกัดละติจูดและลองจิจูดของสถานที่ใน Google Maps
1. เปิด Google Maps ในเบราว์เซอร์
2. คลิกขวาที่ตำแหน่งที่แน่นอนบนแผนที่ที่ต้องการทราบพิกัด
3. เลือกสิ่งที่อยู่ที่นี่จากเมนูตามบริบทที่ปรากฏขึ้น แผนที่จะแสดงการ์ดที่ด้านล่างของหน้าจอ หาพิกัดละติจูดและลองจิจูดในแถวสุดท้ายของการ์ด
คุณแปลงที่อยู่เป็นพิกัดละติจูดและลองจิจูดได้โดยใช้บริการแปลงที่อยู่เป็นพิกัดภูมิศาสตร์ คู่มือสําหรับนักพัฒนาซอฟต์แวร์มีรายละเอียดเกี่ยวกับการเริ่มต้นใช้งานบริการการแปลงที่อยู่เป็นพิกัดภูมิศาสตร์