以上で完了です。

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

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

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

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

情報ウィンドウ

  1. はじめに
  2. 情報ウィンドウの追加
  3. 情報ウィンドウを開く
  4. 情報ウィンドウを閉じる
  5. 情報ウィンドウの移動

はじめに

InfoWindow は、マップ上の指定の場所にポップアップ ウィンドウでコンテンツ(通常はテキストまたは画像)を表示します。情報ウィンドウには、コンテンツ領域と先細の突起部分があります。突起部分の先端が、マップ上の指定された場所に付着しています。

通常、情報ウィンドウはマーカーに付着させますが、特定の緯度/経度にも付着させることができます。詳細は、下記の情報ウィンドウの追加のセクションで説明します。

大まかに言うと、情報ウィンドウは一種のオーバーレイです。その他のオーバーレイのタイプについては、マップ上に描画するをご覧ください。

情報ウィンドウの追加

InfoWindow コンストラクタは、InfoWindowOptions オブジェクト リテラルを受け取ります。このオブジェクト リテラルは、情報ウィンドウを表示するための初期パラメータを指定します。

InfoWindowOptions オブジェクト リテラルには、次のフィールドが含まれます。

  • content には、情報ウィンドウに表示するテキスト文字列または DOM ノードが含まれます。
  • pixelOffset には、情報ウィンドウの先端から情報ウィンドウを固定する場所までのオフセットが含まれます。実際には、このフィールドを指定する必要はありません。デフォルト値のままにしておくことができます。
  • position には、この情報ウィンドウを固定する場所の LatLng が含まれます。注: InfoWindow は、Marker オブジェクトに付着させることも(この場合その場所はマーカーの場所に準じる)、マップ自体の指定された LatLng に付着させることも可能です。LatLng を取得する方法の 1 つとして、ジオコーディング サービスを使用できます。マーカー上で情報ウィンドウを開くと、その position が自動的にアップデートされます。
  • maxWidth は、情報ウィンドウの最大幅をピクセル単位で指定します。デフォルトでは、情報ウィンドウはそのコンテンツが収まるように拡大し、情報ウィンドウが地図と同じ幅になると自動的に改行が行われます。maxWidth を追加すると、情報ウィンドウは指定された幅以上には拡大せず、自動的に改行を行います。最大幅に達し、画面の垂直方向に余裕がある場合、情報ウィンドウは垂直方向に延伸します。

InfoWindow のコンテンツには、テキスト文字列、HTML スニペット、または DOM 要素を含めることができます。コンテンツを設定するには、InfoWindowOptions 内でコンテンツを指定するか、InfoWindowsetContent() を明示的に呼び出します。

コンテンツのサイズを明示的に指定する場合は、<div> 要素内にコンテンツを記述し、CSS で <div> のスタイルを指定します。CSS を使用してスクロールを有効にすることも可能です。スクロールを有効にせず、コンテンツが情報ウィンドウの使用可能スペースを超過した場合、コンテンツは情報ウィンドウからはみ出します。

情報ウィンドウを開く

情報ウィンドウを作成したとき、マップ上に自動的には表示されません。情報ウィンドウが表示されるようにするには、InfoWindowopen() メソッドを呼び出して、ウィンドウを開く Map を渡して、オプションで固定する Marker を渡します。マーカーが指定されていない場合、情報ウィンドウは position プロパティの場所で開きます。

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<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>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

例を見る(infowindow-simple.html)

次の例は、情報ウィンドウの maxWidth を設定しています。例を見る(infowindow-simple-max.html)

情報ウィンドウを閉じる

デフォルトでは、InfoWindow はユーザーが「閉じる」コントロール(情報ウィンドウの右上の X)をクリックするまで開いた状態を維持します。必要に応じて、close() メソッドを呼び出して情報ウィンドウを明示的に閉じることができます。

情報ウィンドウの移動

情報ウィンドウの位置を変更するには、複数の方法があります。

  • 情報ウィンドウで setPosition() を呼び出します。または、
  • InfoWindow.open() メソッドを使用して、情報ウィンドウを新しいマーカーに付着させます。注: マーカーを渡さないで open() を呼び出した場合、InfoWindowInfoWindowOptions オブジェクト リテラルを使用して作成時に指定された位置を使用します。

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

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