以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

Google マップで MySQL と PHP を使用する

概要

このチュートリアルでは、Google Maps JavaScript API を使用して、MySQL データベースの情報を Google マップ上に表示する方法について説明します。このチュートリアルは、MySQL、PHP、XML の中程度の知識がある方を対象としています。

このチュートリアルのマップでは 2 種類のマーカーを表示して、レストランとバーの場所をそれぞれ区別できるようにします。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>

実際に試す

コードブロックの右上にカーソルを合わせて、コードをコピーするか、コードを JSFiddl で開きます。

<!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>

はじめに

MySQL サーバーと PHP をマシンにインストールして、セットアップおよび設定します。

MySQL の表を作成する

マーカーの idnameaddresslatlngtype など、マップ上のマーカーの属性を含む MySQL の表を作成します。

id 属性はプライマリ キーとして機能します。また、type 属性によってレストランとバーを区別します。

表のストレージ容量を最小限に抑えるには、latlng 属性がサイズ (10,6) の浮動小数点値になるように指定します。これにより、このフィールドは小数点の後に 6 桁、小数点の前に最大 4 桁格納できます。

phpMyAdmin インターフェースを通じて、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 呼び出しによりマーカー データを取得できます。

データベースと Google マップの仲介として XML ファイルを使用することで、最初のページの読み込み時間が短縮され、より柔軟なマップ アプリケーションになります。さらに、データベースからの XML 出力と、JavaScript による XML の解析を別々に検証できるため、デバッグが容易になります。完全に静的な XML ファイルのみに基づいてマップを実行でき、MySQL データベースは使用しません。

PHP を使用して MySQL データベースに接続したことがない方は、php.net にアクセスして mysql_connectmysql_select_dbmy_sql_query、および mysql_error についてお読みください。

以下の 3 種類のいずれかの方法で、PHP を介して SQL の表のデータを XML として出力できます。

パブリック ブラウザから PHP ファイルを使用してデータベースにアクセスする場合は、データベースの認証情報のセキュリティを確保することが重要です。そのためには、メインの PHP コードとは別の PHP ファイルにデータベースの接続情報を保存します。認証情報を含むファイルは次のようになります。ただし、実際のデータベースの情報を設定してください。

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

PHP の DOM XML 関数を使用して XML を出力する

PHP の DOM XML 関数は、特殊なエンティティのエスケープなど細かな処理を行い、複雑な構造を持つ XML の作成を簡素化します。DOM XML 関数を使用して、XML ノードの作成、子ノードの追加、XML ドキュメントの画面への出力などを実行できます。サーバーの PHP で DOM XML 関数が有効になっているかを確認するには、設定を確認するか、domxml_new_doc() の初期化を試します。

以下の PHP ファイルは、MySQL データベースに接続し、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" を作成します。次にデータベースに接続し、表 markers で SELECT *(すべて選択)クエリを実行し、結果を反復処理します。表の行(場所)ごとに、XML の属性に行の属性を指定して、新しい XML ノードを作成し、それを親ノードに追加します。コードの最後の部分で、ブラウザの画面に XML をダンプします。

注: データベースに国際文字が含まれている場合、または UTF-8 での出力を強制する必要がある場合、データの出力時に utf8_encode を使用できます。

PHP の echo を使用して XML を出力する

PHP の dom_xml 関数を利用できない場合は、echo 関数で XML を出力できます。echo 関数だけを使用するときは、ヘルパー関数(parseToXML など)を使用すると、特殊なエンティティ(<、>、"、')を XML で処理できるように正しくエンコードできます。

以下の PHP ファイルは、MySQL データベースに接続し、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>';

?>

上記のコードはデータベースに接続し、表 markers で SELECT *(すべて選択)クエリを実行します。親の markers ノードを echo して、クエリの結果を反復処理します。次に、表の行(場所)ごとにマーカーの XML ノードを echo します。ここで、特殊なエンティティが含まれている場合に備えて、parseToXML 関数を通じて name と address のフィールドを先に送信します。スクリプトの最後で、markers 終了タグを echo します。

注: XML データを出力するとき、データベースに国際文字が含まれている場合や UTF-8 での出力を強制する必要がある場合は、utf8_encode を使用できます。

PHP の DOM 関数を使用して XML を出力する

以下の PHP ファイルは、MySQL データベースに接続し、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" 親ノードを作成します。次にデータベースに接続し、表 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 出力として表示されない場合は、header で text/xml コンテンツ タイプを設定している行をファイルから削除して、デバッグを試してください。この行があると、ブラウザは XML を解析しようとするため、デバッグ メッセージを確認しづらくなります。

マップを作成する

このセクションでは、JavaScript と出力した XML ファイルを使用して、このチュートリアルで例示したマップを開発する方法について説明します。Google マップの基本的な作成方法については、ドキュメントをご覧ください。

テキスト エディタで新しいファイルを作成し、index.html という名前で保存します。以降のセクションを読み、このファイルに追加できるコードについて確認してください。

XML ファイルを読み込む

XML ファイルをページに読み込むには、ブラウザで提供されている XMLHttpRequest オブジェクトを活用します。このオブジェクトを使用すると、リクエスト元のウェブページと同じドメインに存在するファイルを取得できます。これは、"AJAX" プログラミングの基本です。

ファイルを読み込む独自の関数を定義して、downloadUrl() という名前を付けます。この関数は次の 2 つのパラメータを取ります。

  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 文字列である restaurant または bar にラベルを関連付けています。これで、XML ファイルからマーカーを作成するときにラベルを参照しやすくなります。

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

マーカーと情報ウィンドウを作成する

マーカーを作成するときは、customLabel 連想配列の type をキーとして、適切なマーカー ラベルを取得できます。.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 関数を呼び出します。この関数はすべてのマーカー要素を反復処理し、各マーカー要素の名前、住所、タイプ、緯度と経度の属性を取得します。
次に、マーカーを作成し、マーカーをマップに追加し、情報ウィンドウを各マーカーにバインドして、クリック時に説明が表示されるようにします。

詳細について

独自の場所データを使用してマップ上にマーカーをプロットしたい場合は、バッチ ジオコーディング サービスで住所を緯度と経度に変換し、マーカーに使用できます。

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。