วิธีผสานรวม Google Maps API: คู่มือทีละขั้นตอน

```html

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

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

ในการเริ่มต้นใช้งาน Google Maps API คุณจะต้องได้รับ API key จาก Google Cloud Console ทำตามขั้นตอนเหล่านี้เพื่อสร้างโปรเจกต์ใหม่และเปิดใช้งาน Maps JavaScript API:

ไปที่ Google Cloud Console (https://console.cloud.google.com/) และลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ
สร้างโปรเจกต์ใหม่หรือเลือกโปรเจกต์ที่มีอยู่
เปิดใช้งาน Maps JavaScript API โดยไปที่ "APIs & Services" > "Library" และค้นหา "Maps JavaScript API" คลิก "Enable" เพื่อเปิดใช้งาน API สำหรับโปรเจกต์ของคุณ
ไปที่ "APIs & Services" > "Credentials" และคลิก "Create credentials" เลือก "API key" เป็นประเภทข้อมูลประจำตัว
คัดลอก API key และเก็บไว้ให้ปลอดภัย เนื่องจากคุณจะต้องใช้ API key เพื่อใช้ Maps JavaScript API

การฝังแผนที่โดยใช้ Google Maps API

ในการฝัง Google Map ลงในหน้าเว็บของคุณ คุณจะต้องใส่สคริปต์ Maps JavaScript API ในไฟล์ HTML ของคุณ และสร้างองค์ประกอบ <div> พร้อม ID เพื่อเก็บแผนที่ นี่คือตัวอย่าง:

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding a Map</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </body>
</html>

ในตัวอย่างนี้ เราใส่สคริปต์ Maps JavaScript API พร้อม API key ของเรา เรายังสร้างองค์ประกอบ <div> พร้อม ID "map" และตั้งค่าความสูงและความกว้างโดยใช้ CSS สุดท้าย เรากำหนดฟังก์ชันที่เรียกว่า initMap() ซึ่งสร้างอ็อบเจกต์ google.maps.Map ใหม่ และตั้งค่าศูนย์กลางและระดับการซูมของแผนที่

การเพิ่มเครื่องหมายด้วย Google Maps API

ในการเพิ่มเครื่องหมายลงในแผนที่ของคุณ คุณสามารถใช้คลาส google.maps.Marker นี่คือตัวอย่าง:

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

  const marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
    title: "Hello World!",
  });
}

ในตัวอย่างนี้ เราสร้างอ็อบเจกต์ google.maps.Marker ใหม่ และระบุตำแหน่ง แผนที่ และชื่อเรื่องของเครื่องหมาย คุณสมบัติ position คืออ็อบเจกต์ที่มีคุณสมบัติ lat และ lng ที่ระบุละติจูดและลองจิจูดของเครื่องหมาย คุณสมบัติ map ระบุแผนที่ที่จะเพิ่มเครื่องหมาย และคุณสมบัติ title ระบุข้อความที่จะแสดงเมื่อวางเมาส์เหนือเครื่องหมาย

การระบุพิกัดทางภูมิศาสตร์ด้วย Google Maps API

การระบุพิกัดทางภูมิศาสตร์คือกระบวนการแปลงที่อยู่หรือชื่อสถานที่ให้เป็นพิกัดละติจูดและลองจิจูด คุณสามารถใช้คลาส google.maps.Geocoder เพื่อดำเนินการระบุพิกัดทางภูมิศาสตร์ นี่คือตัวอย่าง:

function geocodeAddress() {
  const geocoder = new google.maps.Geocoder();
  const address = document.getElementById("address").value;

  geocoder.geocode({ address: address }, (results, status) => {
    if (status === "OK") {
      const map = new google.maps.Map(document.getElementById("map"), {
        center: results[0].geometry.location,
        zoom: 12,
      });

      const marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

ในตัวอย่างนี้ เราสร้างอ็อบเจกต์ google.maps.Geocoder ใหม่ และเรียกใช้เมธอด geocode() ด้วยอ็อบเจกต์ที่ระบุที่อยู่ที่จะระบุพิกัดทางภูมิศาสตร์ เมธอด geocode() ใช้ฟังก์ชันเรียกกลับที่ถูกเรียกใช้พร้อมผลลัพธ์ของคำขอระบุพิกัดทางภูมิศาสตร์ หากสถานะเป็น "OK" เราจะสร้างแผนที่และเครื่องหมายใหม่โดยใช้พิกัดละติจูดและลองจิจูดที่ส่งคืนโดยตัวระบุพิกัดทางภูมิศาสตร์ หากมีข้อผิดพลาด เราจะแสดงการแจ้งเตือนพร้อมข้อความแสดงข้อผิดพลาด

รับเส้นทางโดยใช้ Google Maps API

Google Maps API ยังมีฟังก์ชันการทำงานของเส้นทาง ซึ่งช่วยให้คุณคำนวณเส้นทางระหว่างสถานที่ต่างๆ ได้ นี่คือตัวอย่าง:

function calculateRoute() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();

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

  directionsRenderer.setMap(map);

  const request = {
    origin: document.getElementById("origin").value,
    destination: document.getElementById("destination").value,
    travelMode: google.maps.TravelMode.DRIVING,
  };

  directionsService.route(request, (result, status) => {
    if (status == "OK") {
      directionsRenderer.setDirections(result);
    } else {
      alert("Directions request failed due to " + status);
    }
  });
}

ในตัวอย่างนี้ เราสร้างอ็อบเจกต์ google.maps.DirectionsService ใหม่เพื่อจัดการคำขอเส้นทาง และอ็อบเจกต์ google.maps.DirectionsRenderer เพื่อแสดงเส้นทางบนแผนที่ จากนั้นเราสร้างแผนที่ใหม่และตั้งค่า DirectionsRenderer เพื่อแสดงเส้นทางบนแผนที่ เราสร้างอ็อบเจกต์ request ที่ระบุที่อยู่ต้นทางและปลายทาง และโหมดการเดินทาง (ในกรณีนี้คือการขับรถ) จากนั้นเราเรียกใช้เมธอด route() ของอ็อบเจกต์ DirectionsService ด้วยอ็อบเจกต์คำขอและฟังก์ชันเรียกกลับ หากสถานะเป็น "OK" เราจะตั้งค่าเส้นทางบนอ็อบเจกต์ DirectionsRenderer หากมีข้อผิดพลาด เราจะแสดงการแจ้งเตือนพร้อมข้อความแสดงข้อผิดพลาด

รับสถานที่ด้วย Google Maps API

Google Maps API ยังมี Places API ที่ช่วยให้คุณค้นหาสถานที่และดึงข้อมูลเกี่ยวกับสถานที่เหล่านั้นได้ นี่คือตัวอย่าง:

function searchPlaces() {
  const service = new google.maps.places.PlacesService(map);

  const request = {
    query: document.getElementById("query").value,
    fields: ["name", "geometry"],
  };

  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (let i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }

      map.setCenter(results[0].geometry.location);
    }
  });
}

function createMarker(place) {
  const marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
  });

  google.maps.event.addListener(marker, "click", () => {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

ในตัวอย่างนี้ เราสร้างอ็อบเจกต์ google.maps.places.PlacesService ใหม่ และกำหนดอ็อบเจกต์ request ที่ระบุแบบสอบถามการค้นหาและฟิลด์ที่จะดึงข้อมูลสำหรับแต่ละสถานที่ จากนั้นเราเรียกใช้เมธอด findPlaceFromQuery() ของอ็อบเจกต์ PlacesService ด้วยอ็อบเจกต์คำขอและฟังก์ชันเรียกกลับ หากสถานะเป็น "OK" เราจะวนซ้ำผลลัพธ์และสร้างเครื่องหมายสำหรับแต่ละสถานที่โดยใช้ฟังก์ชัน createMarker() เรายังตั้งค่าศูนย์กลางของแผนที่ไปยังตำแหน่งของผลลัพธ์แรก ฟังก์ชัน createMarker() สร้างอ็อบเจกต์ google.maps.Marker ใหม่ และเพิ่มตัวฟังเหตุการณ์คลิกไปยังเครื่องหมาย เมื่อคลิกเครื่องหมาย จะแสดงหน้าต่างข้อมูลพร้อมชื่อสถานที่

การใช้ Apidog สำหรับการเรียก API

สมมติว่าคุณกำลังสร้างแอป React.js ที่ดึงข้อมูลจาก API สภาพอากาศ นี่คือวิธีที่คุณสามารถใช้ Apidog เพื่อจัดการการเรียก API:

ขั้นตอนที่ 1: เปิด Apidog และสร้าง request ใหม่

ขั้นตอนที่ 2: ในตัวแก้ไขการทดสอบ ให้ป้อน URL ของปลายทาง API ของคุณ เลือกเมธอด HTTP และเพิ่มส่วนหัว พารามิเตอร์ หรือข้อมูลเนื้อหาที่คุณต้องการ ตัวอย่างเช่น คุณสามารถทดสอบเส้นทางที่ส่งคืนข้อความง่ายๆ ที่เราสร้างขึ้นก่อนหน้านี้:

ขั้นตอนที่ 3: คลิกปุ่ม Send และดูผลลัพธ์ของการทดสอบของคุณ คุณควรเห็นรหัสสถานะ เวลาตอบสนอง และเนื้อหาการตอบสนองของ API ของคุณ ตัวอย่างเช่น คุณควรเห็นสิ่งนี้:

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

บทสรุป

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

💡

และโปรดจำไว้ว่า หากคุณตั้งเป้าที่จะยกระดับการพัฒนา API ของคุณ ให้ลองใช้ Apidog เครื่องมือที่แข็งแกร่งนี้ได้รับการออกแบบมาเพื่อปรับปรุงโปรเจกต์ API ของคุณและอื่นๆ อีกมากมาย รับได้ฟรีและค้นพบวิธีที่สามารถเพิ่มประสิทธิภาพเวิร์กโฟลว์และเพิ่มประสิทธิภาพของคุณได้

button

```