情報ウィンドウの最大幅の設定

広告

情報ウィンドウには文字列やHTMLタグなどを記述することができますが、非常に長い文字列を表示した場合などは情報ウィンドウの幅も自動的に広がって表示されます。そして地図の横幅いっぱいまで広がっても表示しきれない時は、自動的に折り返しが行われます。

p4-1

このように長い文字列を表示する場合に、情報ウィンドウの最大幅を設定しておくことができます。設定を行うにはInfoWindowクラスのオブジェクトを作成する時に指定するInfoWindowOptionsオブジェクトの「maxWidth」プロパティに設定します。

指定可能な値はnumberで単位はピクセルです。 

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

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

上記の場合、最大幅を250ピクセルに設定しています。

注意点としてこのプロパティの設定は情報ウィンドウを開く前に行って下さい。後から「setOption」メソッドを使って新しいプロパティの値を設定する場合は、いったん「close」メソッドで情報ウィンドウを閉じてから「setOption」メソッドを使い、その後で改めて情報ウィンドウを開いて下さい。(具体的な手順はこの後のサンプルをご覧下さい)。

なお情報ウィンドウには最小幅もあります。コンテンツに設定する文字列が非常に短い場合でも情報ウィンドウが文字列の長さに合わせて短くなるわけではありません。

p4-2

スタイルシートを使った設定

情報ウィンドウにはHTMLタグを記述することができますが、スタイルシートを指定することも可能です。その為、スタイルシートを使って横幅を設定することも可能です。

例えば次のように記述します。 

var latlng = new google.maps.LatLng(35.539001,134.228468);
var iwopts = {
  content: '<p style="width:50;">Hello</p>',
  positon: latlng
};

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

使いやすい方で設定して下さい。

サンプルコード

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

var map;
var infowindow;

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

  var contentStr = 'しまなみ海道の正式名称は西瀬戸自動車道であり' +
    '広島県尾道市から愛媛県今治市に至る道路です';

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

function set250() {
  infowindow.close();

  var iwopts = {
    maxWidth: 250
  };
  infowindow.setOptions(iwopts);

  infowindow.open(map);
}

function set300() {
  infowindow.close();

  var iwopts = {
    maxWidth: 300
  };
  infowindow.setOptions(iwopts);

  infowindow.open(map);
}

function set350() {
  var latlng = new google.maps.LatLng(34.064606,132.997742);
  var contentStr = '<p style="width:350px;">' +
    'しまなみ海道の正式名称は西瀬戸自動車道であり' +
    '広島県尾道市から愛媛県今治市に至る道路です' +
    '</p>';

  var infowindow2 = new google.maps.InfoWindow({
    content: contentStr,
    position: latlng
  });
  infowindow2.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/code4_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>

    <form>
    <p>
    <input type="button" id="w250" value="250px" onclick="set250()" />
    <input type="button" id="w300" value="300px" onclick="set300()" />
    <input type="button" id="w350" value="350px(CSS)" onclick="set350()" />
    </p>
    </form>
  </body>
</html>

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

p4-3

現在は最大幅を設定していない状態です。では地図下にある「250px」と書かれたボタンを押して下さい。

p4-4

情報ウィンドウの幅が"250ピクセル"に設定されます。今度は「300px」と書かれたボタンを押して下さい。

p4-5

情報ウィンドウの幅が"300ピクセル"に設定されます。最後に「350px(CSS)」と書かれたボタンを押して下さい。

p4-6

新しい情報ウィンドウが幅"350ピクセル"で開きます。この情報ウィンドウは「maxWidth」プロパティではなくスタイルシートを使って幅が設定されています。

( Written by Tatsuo Ikura )