PHP 串接 Google Maps API 顯示地標資訊：地理編碼、地圖類型切換、縮放等級控制

本文展示如何以 PHP 後端處理地址地理編碼 (Geocoding)，配合 Google Maps JavaScript API v2 (經典版) 前端顯示互動地圖，支援地圖類型切換 (一般/衛星/混合)、縮放等級選擇、自訂標記點，程式碼結構清晰分離 PHP 與 JS 邏輯。

架構分工

• PHP 後端： 接收表單參數、呼叫 Google Geocoding API (舊版 CSV 輸出)、解析經緯度、產生預設值供前端使用
• 前端 JS： 載入 Google Maps API、初始化地圖、設定中心點/縮放/類型、加入標記、綁定表單提交事件

PHP 後端邏輯 map.php

<?php
// 簡易輔助函式：產生 SELECTED 屬性
function selected($param, $value) {
    if ($param == $value) echo ' selected="selected"';
}

// 1. 取得表單參數 (預設值)
$scale = isset($_REQUEST['scale']) ? (int)$_REQUEST['scale'] : 10;
$maptype = isset($_REQUEST['maptype']) ? $_REQUEST['maptype'] : 'G_NORMAL_MAP';

// 2. 地理編碼：將地址轉為經緯度
// 注意：實際專案應快取結果，避免重複呼叫 API 超額
$apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';  // 申請於 Google Cloud Console
$address = '48 Spa Road, Melksham, UK';  // 可改為 $_REQUEST['address']

// 舊版 Geocoding API (已棄用，示範用)
// $url = "https://maps.google.com/maps/geo?q=" . urlencode($address) . "&output=csv&key=$apiKey";
// $result = file($url);
// list($status, $accuracy, $lat, $lng) = explode(',', $result[0]);

// 示範用固定座標 (Melksham, UK)
$lat = 51.369318;
$lng = -2.133457;
?>

前端 HTML + JavaScript

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <title>Well House Manor, Melksham - Google Maps Demo</title>
  <!-- Google Maps API v2 (舊版，新專案請用 v3) -->
  <script src="https://maps.google.com/maps?file=api&v=2&key=<?= $apiKey ?>" type="text/javascript"></script>
  <style>
    #map {width: 450px; height: 550px; border: 1px solid #ccc;}
    .controls {margin-bottom: 10px;}
    label {margin-right: 10px;}
  </style>
</head><body onload="load()" onunload="GUnload()">

<table><tr valign="top"><td>
  <h1>Well House Manor, Melksham</h1>
  <img src="/get_pic/2010/03/20100525003348607.jpg" alt="館舍照片"><br>
  • Business Hotel in Melksham<br>
  • All rooms fitted to superior standard<br>
  • Internet Access throughout<br>
  • Plenty of parking and close to town centre<br><br>
  <a href="https://www.wellhousemanor.co.uk" target="_blank">Well House Manor website</a><hr>

  <div class="controls">
    <form method="post" action="">
      縮放等級：
      <select name="scale">
        <option value="7"<?php selected($scale, 7); ?>>概覽 (7)</option>
        <option value="10"<?php selected($scale, 10); ?>>縣市 (10)</option>
        <option value="13"<?php selected($scale, 13); ?>>城鎮 (13)</option>
        <option value="16"<?php selected($scale, 16); ?>>街道 (16)</option>
        <option value="19"<?php selected($scale, 19); ?>>建築 (19)</option>
      </select>

      地圖類型：
      <select name="maptype">
        <option value="G_NORMAL_MAP"<?php selected($maptype, 'G_NORMAL_MAP'); ?>>一般地圖</option>
        <option value="G_SATELLITE_MAP"<?php selected($maptype, 'G_SATELLITE_MAP'); ?>>衛星圖</option>
        <option value="G_HYBRID_MAP"<?php selected($maptype, 'G_HYBRID_MAP'); ?>>混合圖</option>
      </select>
      <input type="submit" value="套用">
    </form>
  </div>

  <p>日期：<?= date('F, jS l Y') ?></p>
</td><td>
  <div id="map"></div>
</td></tr></table>

<script type="text/javascript">
//<![CDATA[
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(<?= $lat ?>, <?= $lng ?>), <?= $scale ?>);
    map.setMapType(<?= $maptype ?>);

    var marker = new GMarker(new GLatLng(<?= $lat ?>, <?= $lng ?>));
    map.addOverlay(marker);
    marker.openInfoWindowHtml("<b>Well House Manor</b><br>48 Spa Road, Melksham, UK");
  }
}
//]]>
</script>
</body></html>

遷移至 Google Maps JavaScript API v3 (現代版) 關鍵差異

v3 版本完整範例 (關鍵片段)

<script>
function initMap() {
  var center = {lat: <?= $lat ?>, lng: <?= $lng ?>};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: <?= $scale ?>,
    center: center,
    mapTypeId: '<?= $maptype ?>'  // 需轉換為 v3 常數
  });

  var marker = new google.maps.Marker({
    position: center,
    map: map,
    title: 'Well House Manor'
  });

  var info = new google.maps.InfoWindow({
    content: '<b>Well House Manor</b><br>48 Spa Road, Melksham, UK'
  });
  marker.addListener('click', function() { info.open(map, marker); });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

進階功能擴充建議

• 地址自動完成： Places Library Autocomplete，使用者輸入地址即時建議
• 路線規劃： Directions Service 顯示從使用者位置到地標的導航
• 多標記聚合： MarkerClusterer 處理大量標記效能
• 自訂地圖樣式： Styled Map 隱藏 POI、調整顏色符合品牌
• Street View： 全景街景整合
• 離線地圖/快取： Map Tiles 快取策略、Service Worker 離線支援

API Key 管理與配額控制

1. Google Cloud Console 建立專案、啟用 Maps JavaScript API、Geocoding API、Places API
2. 建立 API Key，設定 **HTTP Referrer 限制** (僅允許你的域名)
3. 設定 **API 配額上限** (每日請求數)，避免超額扣費
4. 啟用 **計費帳戶** (免費額度：每月 $200，約 28,000 次 Maps 載入)
5. 監控「API 與服務」儀表板，設定預算告警

Google Maps API 從 v2 到 v3 歷經重大重構，新專案務必採用 v3，並善用 Places、Directions、Geometry 等豐富程式庫打造完整位置服務體驗。

1. 上一篇文章： 10 大免費 PHP 腳本下載網站推薦：從熱門目錄到垂直領域資源庫
2. 下一篇文章： PHP 固定寬度文字檔轉 CSV 類別：SplFileObject 迭代、欄位選擇、分隔符自訂、高效能轉換

PHP 綜合知識

PHP 日曆元件：農曆轉換、節氣計算、假期標記與前端無框架渲染

從簡單的月曆表格到支援農曆、二十四節氣、法定假期調休、自定義

PHP 無限級分類兩大經典實現：路徑枚舉法 vs 遞歸查詢法（含資料庫設計、增刪改查完整代碼）

無限級分類是電商、CMS、權限系統的核心模型。本文對比兩種主

Windows 文件系統機制導致的 PHP 路徑遍歷漏洞深度分析：FindFirstFile 通配符特性被濫用

Windows API FindFirstFile() 在處

織夢DedeCMS mytag 自定義宏標籤使用教程

標籤核心信息 屬性說明 標籤名mytag