您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

使用 MySQL 與 PHP 來搭配 Google 地圖

總覽

此教學課程示範如何使用 Google Maps JavaScript API 在 Google 地圖上顯示來自 MySQL 資料庫的資訊。它適合具備 MySQL、PHP 與 XML 中級知識的使用者。

此教學課程中的地圖會顯示兩種標記,分別用來區別餐廳與酒吧的位置。MySQL 中的資料庫儲存個別標記位置的相關資訊,例如,地點的類型(是餐廳還是酒吧)、它的名稱、地址與地理座標。地圖會透過 XML 檔案從資料庫擷取此資訊,而該檔案的作用是做為資料庫與地圖之間的媒介。您可以使用 PHP 陳述式,將標記資訊從資料庫匯出到 XML 檔案。

按一下下面地圖上的標記以顯示一個資訊視窗,其中包含位置的名稱與地址。標記有標籤「R」或「B」,分別用來標出餐廳與酒吧的位置。

下面的範例顯示建立此地圖所需的完整程式碼。

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

自己試試看

將游標放在程式碼區塊右上方,以複製程式碼或在 JSFiddle 中將它開啟。

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* 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>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

開始使用

在電腦上使用 PHP 安裝、設定及設置 MySQL 伺服器。

在 MySQL 中建立資料表

在 MySQL 中建立一個表格,內含地圖上標記的屬性,像是標記 idnameaddresslatlngtype

id 屬性做為主要索引鍵,而 type 屬性用來辨別餐廳與酒吧。

要讓資料表儲存空間維持最小,您可以將 latlng 屬性指定為大小為 (10,6) 的浮點數。這可讓欄位儲存小數點後 6 位數,加上小數點前最多 4 位數。

您可以透過 phpMyAmin 介面與 MySQL 資料庫互動。下面的螢幕擷取畫面顯示以 phpMyAdmin 設定的資料表。

您也可以使用 SQL 命令建立資料表,如下面的 SQL 陳述式所示。

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

填入資料表

您可以使用 phpMyAdmin 介面的「Import」功能將標記資料匯入到 SQL 資料庫,這個功能可讓您以各種格式匯入資料。

下面是此教學課程中地圖的標記資料,使用的是 .csv 格式。

Love.Fish,"580 Darling Street, Rozelle, NSW",-33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-33.874737,151.215530,restaurant

您也可以使用下面的 SQL 命令,將標記資料匯入到 SQL 資料表。

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

使用 PHP 將資料輸出為 XML

在這個時候,您應該有一個名為 markers 且包含地圖標記資料的資料表。此節示範如何使用 PHP 陳述式將資料表資料從 SQL 資料庫匯出為 XML 格式。地圖可以使用 XML 檔案,透過非同步 Javascript 呼叫擷取標記資料。

使用 XML 檔案做為資料庫與 Google 地圖之間的媒介,能夠加快初始頁面載入速度,並讓地圖應用程式更靈活。它讓偵錯變得更簡單,因為您可以獨立驗證從資料庫匯出的 XML 輸出以及用 JavaScript 剖析 XML。您也可以完全只使用靜態 XML 檔案而不要使用 MySQL 資料庫來執行地圖。

如果您從未使用 PHP 連線到 MySQL 資料庫,請造訪 php.net 並閱讀 mysql_connectmysql_select_dbmy_sql_querymysql_error 的詳細資訊。

您可以使用下列三種不同的技術,使用 PHP 將 SQL 資料表資料輸出為 XML。

當使用公用瀏覽器存取使用 PHP 檔案的資料庫時,請務必確定資料庫認證是安全的。為此,您可以將資料庫連線資訊與主要 PHP 程式碼分開存放到不同的 PHP 檔案中。包含認證的檔案應該看起來和下面這個類似,但是其中包含您自己的資料庫資訊。

<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

使用 PHP 的 DOM XML 函式輸出 XML

PHP 的 DOM XML 函式可處理一些細緻的部分(例如逸出 XML 中的特殊實體),而且可讓您輕鬆地建立具有更複雜結構的 XML。您可以使用 DOM XML 函式建立 XML 節點、附加子節點以及將 XML 文件輸出到畫面。如果要判斷伺服器的 PHP 是否已啟用 DOM XML 功能,請檢查您的設定或嘗試初始化 domxml_new_doc()

下面是連線到 MySQL 資料庫的 PHP 檔案,它會將 XML 傾印到瀏覽器。

<?php
require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $doc->create_element("marker");
  $newnode = $parnode->append_child($node);

  $newnode->set_attribute("name", $row['name']);
  $newnode->set_attribute("address", $row['address']);
  $newnode->set_attribute("lat", $row['lat']);
  $newnode->set_attribute("lng", $row['lng']);
  $newnode->set_attribute("type", $row['type']);
}

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>

在上面的檔案中,PHP 程式碼會先初始化一個新的 XML 文件並建立「markers」父節點。接著它會連線到資料庫,在標記資料表上執行 SELECT * (全選)查詢,然後逐一查看結果。對於資料表中的每一列(每個位置),程式碼會建立一個新的 XML 節點並以列屬性做為 XML 屬性,然後將該節點附加到父節點。程式碼最後的部分是將 XML 傾印到瀏覽器畫面。

注意:如果您的資料庫包含國際字元或是需要強制 UTF-8 輸出,您可以在資料輸出上使用 utf8_encode

使用 PHP 的 echo 輸出 XML

如果您無權存取 PHP 的 dom_xml 函式,則可以使用 echo 函式輸出 XML。只使用 echo 函式時,可搭配協助程式函式(例如 parseToXML),正確將一些特殊實體 (<,>,",') 編碼為適用於 XML 的格式。

下面是連線到 MySQL 資料庫的 PHP 檔案,它會將 XML 傾印到瀏覽器。

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

上面的程式碼會連線到資料庫並在標記資料表上執行 SELECT * (全選)查詢。接著,它會輸出 markers 父節點,並逐一查看查詢結果。接著,程式碼會為資料表每一列中的標記(針對每個位置)輸出 XML 節點。如果其中有任何特殊實體,這會先透過 parseToXML 函式傳送名稱與地址欄位。輸出結尾 markers 標記時,指令碼就結束。

注意:如果您的資料庫包含國際字元或需要強制 UTF-8 輸出,您可以在 XML 資料輸出上使用 utf8_encode

使用 PHP 的 DOM 函式輸出 XML

下面是連線到 MySQL 資料庫的 PHP 檔案,它會將 XML 傾印到瀏覽器。

<?php

require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

?>

上面的程式碼會初始化一個新的 XML 文件並建立「markers」父節點。接著它會連線到資料庫,在標記資料表上執行 SELECT * (全選)查詢,然後逐一查看結果。程式碼會為資料表中的每一列建立一個 XML 節點(針對每個位置)並以列屬性做為 XML 屬性,然後將該節點附加到父節點。接著,它會將輸出 XML 傾印到瀏覽器畫面。

注意:如果您的資料庫包含國際字元或是需要強制 UTF-8 輸出,您可以在資料輸出上使用 utf8_encode

檢查 XML 輸出是否有效

如果要確認 PHP 指令碼可輸出有效的 XML,請從瀏覽器呼叫您建立的 PHP 指令碼檔案,以查看像下面一樣的 XML 輸出。

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

如果瀏覽器沒有顯示資料庫的標記資料做為 XML 輸出,請嘗試將檔案中設定標頭為 text/xml 內容類型的這一行移除,以進行偵錯。這一行可能會造成瀏覽器嘗試剖析 XML,使得您很難看到偵錯訊息。

建立地圖

此節示範如何使用 JavaScript 開發此教學課程中的地圖範例以及輸出 XML 檔案。閱讀文件,以深入了解建立 Google 地圖的基本知識

在文字編輯器中建立新檔案,並將它儲存為 index.html。閱讀後續各節,以了解您可以新增到此檔案中的程式碼。

載入 XML檔案

如果要將 XML 檔案載入到頁面,您可以利用瀏覽器提供的 XMLHttpRequest 物件。此物件能讓您擷取位於與要求網頁相同網域上的檔案,而且該物件是「AJAX」程式設計的基礎。

定義您自己用於載入檔案的函式,並將它命名為 downloadUrl()。此函式接受兩個參數:

  1. url 指定到您的 XML 檔案或產生該檔案之 PHP 指令碼的路徑,這取決於您是否要在資料庫變更時動態更新 XML 檔案。此教學課程中的這個地圖會針對標記資料呼叫靜態 XML 檔案。
    通常最簡單的方法是讓此 XML 檔案位於與 HTML 檔案相同的目錄中,這樣您只需以檔案名稱參照它即可。
  2. callback 指出 XML 傳回到 JavaScript 時指令碼會呼叫的函式。

下面的程式碼示範函式宣告。

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

注意:由於 XMLHttpRequest 是非同步的,因此回呼函式會根據 XML 檔案的大小初始化 downloadURL 函式。XML 檔案越大,所花的時間越長。因此,在 downloadUrl 後面,最好不要放入任何依賴回呼函式內標記的程式碼。您應該改為將此類程式碼放在回呼函式內。

定義了函式之後,即可從程式碼呼叫它,並傳入 PHP 檔案的名稱與回呼函式。此教學課程中的這個地圖會針對標記資料呼叫靜態 XML 檔案,如下面的程式碼所示。


downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

建立自訂標記

下面的程式碼示範如何先建立關聯性陣列以新增標記的自訂標籤。這會將標籤與標記 type 字串 restaurantbar 關聯。這樣當您從 XML 檔案建立標記時,就容易參照標籤。

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  }
};

建立標記與資訊視窗

建立標記時,您可以使用 type 做為 customLabel 關聯陣列的索引鍵,來擷取適當的標記標籤。轉送 .label 屬性做為 google.maps.Marker 建構函式選項。

接下來,建立要在資訊視窗中出現的 HTML,方式是結合名稱、地址與 HTML 標記來強調名稱。

如果您將 HTML 格式描述儲存在資料庫,則必須處理逸出 HTML 實體並與該 HTML 輸出繫結。等到在 JavaScript 中個別擷取每個屬性之後,您可以在用戶端上自由處理 HTML,而且能夠快速地預覽新的格式。

建構 HTML 字串之後,下面的程式碼會新增一個事件接聽程式到標記,點擊該標記時會顯示資訊視窗。

marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

組合起來

在瀏覽器中開啟 index.html 檔案。當頁面載入時,initMap 函式會設定地圖,然後呼叫 downloadUrl 函式。此函式會逐一查看所有標記元素,並為每個標記元素擷取 name、address、type 與 latLng 屬性。
接著,程式碼會建立標記、新增標記到地圖,以及將資訊視窗繫結到每個標記,以在點擊時顯示描述。

更多資訊

如果您要使用自己的位置資料在地圖上繪製標記,可以使用批次地理編碼服務,針對標記將地址轉換為緯度與經度。

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁