情報ウィンドウに表示するコンテンツの設定

広告

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

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

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

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

var infowindow = new google.maps.InfoWindow(iwopts);

単なる文字列だけでなくHTMLタグなども記述することができます。 

var latlng = new google.maps.LatLng(35.539001,134.228468);
var contentStr = '<p><a href="index.html"><img src="home.png" /></a></p>';

var iwopts = {
  content: contentStr,
  positon: latlng
};

var infowindow = new google.maps.InfoWindow(iwopts);

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

コンテンツの再設定

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

setOptions(options:InfoWindowOptions)

--

引数にはInfoWindowOptionsオブジェクトを指定して下さい。実際には次のように使用します。 

var infowindow = new google.maps.InfoWindow(iwopts);

var new_iwopts = {
  content: 'bye'
};
infowindow.setOptions(new_iwopts);

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

ノードを使った指定

InfoWindowOptionsオブジェクトの「content」プロパティに設定できる値は文字列だけでなくノードを指定することもできます。あまり使うことはないかもしれませんが、例えば次のように記述します。 

var latlng = new google.maps.LatLng(35.539001,134.228468);
var contentStr = '<p><a href="index.html"><img src="home.png" /></a></p>';

var img_node = document.createElement("img");
img_node.src = "home.png";
img_node.width = "100";
img_node.height = "50";

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

var infowindow = new google.maps.InfoWindow(iwopts);
サンプルコード

では実際に試してみます。 

function initialize() {
  var latlng = new google.maps.LatLng(43.070667,141.343585);
  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/home.png" width="24" height="24" alt="home" />' + 
    '<a href="http://www.hokudai.ac.jp/">北海道大学</a>' +
    '</p>';

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

<!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 JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code3_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:400px"></div>

  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p3-1

表示されているリンクをクリックするとリンク先のWebページが表示されます。

p3-2

サンプルコード

ではノードを使って同じようなもサンプルも試してみます。 

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

  var p_node = document.createElement("p");

  var img_node = document.createElement("img");
  img_node.src = "./img/home.png";
  img_node.width = "24";
  img_node.height = "24";
  img_node.alt = "home";

  var a_node = document.createElement("a");
  a_node.href = "http://www.nagoya-u.ac.jp/";

  var text_node = document.createTextNode("名古屋大学");
  a_node.appendChild(text_node);

  p_node.appendChild(img_node);
  p_node.appendChild(a_node);

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

<!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 JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code3_2.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:400px"></div>

  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p3-3

( Written by Tatsuo Ikura )