Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

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

บทนำ

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

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

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

การสร้างแผนที่ 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 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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: "YOUR_API_KEY", v: "weekly"});</script>
  </head>
  <body>

    <!-- The map, centered at Uluru, Australia. -->
    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
    </gmp-map>

  </body>
</html>

นี่คือหน้า HTML พื้นฐานมากซึ่งใช้องค์ประกอบ gmp-mapเพื่อ แสดงแผนที่ในหน้า แผนที่จะว่างเปล่าเนื่องจากเรายังไม่ได้เพิ่มโค้ด JavaScript

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

ในตัวอย่างนี้ เราได้ทำสิ่งต่อไปนี้

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

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

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

<!DOCTYPE html>

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

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

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

โหลด 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

ในขั้นตอนนี้ของบทแนะนำ หน้าต่างว่างจะปรากฏขึ้นโดยแสดงเฉพาะข้อความป้ายกำกับที่ไม่ได้จัดรูปแบบ เนื่องจากเรายังไม่ได้เพิ่มโค้ด JavaScript

สร้างองค์ประกอบ `gmp-map`

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

โค้ดด้านล่างกำหนดองค์ประกอบ gmp-map และตั้งค่าพารามิเตอร์ center, zoom และ map-id

<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
</gmp-map>

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

ระดับการซูม

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

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

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

โค้ดด้านล่างอธิบาย CSS ที่กำหนดขนาดขององค์ประกอบ gmp-map

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

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

การจัดช่องควบคุม

คุณสามารถใช้การจัดช่องควบคุมเพื่อเพิ่มการควบคุมแบบฟอร์ม HTML ลงในแผนที่ ช่องคือตำแหน่งที่กำหนดไว้ล่วงหน้าในแผนที่ ใช้แอตทริบิวต์ slot เพื่อตั้งค่าตำแหน่งที่ต้องการสำหรับองค์ประกอบ และซ้อนองค์ประกอบภายในองค์ประกอบ gmp-map ข้อมูลโค้ดต่อไปนี้แสดงการเพิ่มป้ายกำกับ HTML ที่มุมซ้ายบนของแผนที่