• 小
  • 中
  • 大

表示するコンテンツの設定


情報ウィンドウが開いた時に、情報ウィンドウ内に指定したコンテンツを表示することができます。表示する内容は文字列の他にHTML文書なども指定することができるため、HTMLタグを使ってリンクや画像なども表示させることができます。

コンテンツの設定はInfoWindowクラスのオブジェクトを作成する時に指定するInfoWindowOptionsオブジェクトの「content」プロパティに設定します。指定できる値は「string|Node」となっており、文字列かノードを指定することができます。

下記は文字列を指定した場合です。 


var latlng = new google.maps.LatLng(35.658704,139.745408);
var iwopts = {
  content: 'Hello',
  positon: latlng
};

単なる文字列だけでなくHTMLタグなども記述することができます。 
var latlng = new google.maps.LatLng(35.658704,139.745408);
var htmlTag = '
';
var iwopts = {
  content: htmlTag,
  positon: latlng
};
var infowindow = new google.maps.InfoWindow(iwopts);

HTMLタグを記述することでリンクを貼ったり画像を表示したりといったことが可能になります。

コンテンツの再設定

InfoWindowクラスのオブジェクトを作成時にコンテンツを設定するのではなく、InfoWindowクラスのオブジェクトを作成した後でコンテンツを設定するにはInfoWindowクラスで用意されている「setOptions」methodを使用します。


setOptions(options:InfoWindowOptions)

引数にはInfoWindowOptionsオブジェクトを指定して下さい。実際には次のように使用します。
var infowindow = new google.maps.InfoWindow(iwopts);
var new_iwopts = {
  content: '指定文字'
};
infowindow.setOptions(new_iwopts);

後からコンテンツを再設定する場合などはこの方法を使って下さい。

ノードを使った指定


InfoWindowOptionsオブジェクトの「content」プロパティに設定できる値は文字列だけでなくノードを指定することもできます。


var latlng = new google.maps.LatLng(35.658704,139.745408);
var contentStr = '<p><a href="index.html">
  <img src＝"temp.png" /></a></p>';
var img_node = document.createElement("img");
img_node.src = "temp.png";
img_node.width = "80";
img_node.height = "80";

var Iwopts = {
  content: img_node,
  positon: latlng
};

サンプルコード

サンプル.js 


function initialize() {
  var latlng = new google.maps.LatLng(35.689488,139.691706);
  var opts = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map
    (document.getElementById("map_canvas"), opts);

  var contentStr = '<p>' +
  '<img src="./img/green.png" width="32" height="32" alt="都庁" />' +
  '<a href="http://www.metro.tokyo.jp"/>東京都庁</a>'　+ '</p>';

  var infowindow = new google.maps.InfoWindow({
  content: contentStr,
  position: latlng
  });  infowindow.open(map);
}

サンプル.html 
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例　表示するコンテンツの設定


Google Maps サンプル　>　表示するコンテンツの設定