เมนู
ในหน้านี้

Google Maps Integration

เชื่อมต่อแผนที่แบบโต้ตอบพร้อม markers, geocoding และการค้นหาสถานที่

Live demo นี้ใช้ Google Maps JavaScript API จริง สำรวจแผนที่แบบโต้ตอบด้านล่าง — คลิกที่ markers เพื่อดูข้อมูลสถานที่ สลับระหว่างมุมมอง Map และ Satellite ซูมเข้า/ออก หรือใช้ปุ่มตำแหน่งเพื่อหาตำแหน่งปัจจุบันของคุณ แผนที่แสดงสถานที่สำคัญยอดนิยมในกรุงเทพฯ เป็นตัวอย่าง markers

นี่คือ Google Maps API integration จริงโดยใช้ @react-google-maps/api ฟีเจอร์รวมถึง custom markers, InfoWindows, การสลับประเภทแผนที่, ควบคุมการซูม และ geolocation คุณสามารถใช้ Mapbox หรือ Leaflet แทนได้ — รูปแบบการจัดการ state ด้วย React ใช้ได้กับทุก mapping library

วิธีการทำงาน

# 1. Install @react-google-maps/api
npm install @react-google-maps/api

# 2. Add your API key to .env.local
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here

# 3. Configure Google Cloud Console:
#    - Enable Maps JavaScript API
#    - Set HTTP referrer restrictions for security
#    - Set API quotas to prevent abuse

# Key Point: NEXT_PUBLIC_ prefix is required because
# Google Maps JavaScript API runs in the browser

Markers

Custom markers with info windows.

Directions

Route planning and navigation.

Map Types

Roadmap, satellite, and terrain views.

Geolocation

Current location and geocoding.

คุณสมบัติหลัก

  • •แผนที่แบบโต้ตอบพร้อม custom markers
  • •Geocoding API สำหรับค้นหาที่อยู่
  • •Places Autocomplete integration
  • •Custom map styling และ controls
  • •Responsive map containers

ตัวอย่างการใช้งาน
API

Google Maps Demo

Maps JavaScript API