Search

Google Maps JavaScript API v3情報ウィンドウ

Google Maps JavaScript API V3

情報ウィンドウ

2011/6/26

情報ウィンドウは地図上に吹き出しを表示します。 Google Maps API V2では地図上に1つしか情報ウィンドウを表示できませんでしたが、V3からは複数の情報ウィンドウを表示できるようになりました。

情報ウィンドウは、下記のオプションを使用して作成することができます。 

var infowindow=new google.maps.InfoWindow({
  /* 情報ウィンドウのオプション設定 */
  content: 'お店は<a href='#'>こちら</a>！'
});
InfoWindowOptionsオブジェクト
プロパティ説明
content 情報ウィンドウ内に表示するテキストを指定します。HTML文も記述できます。
disableAutoPan 情報ウィンドウを表示する時に、地図を情報ウィンドウ全体が表示されるよう地図が自動的に移動するのを無効化するかを真偽値で指定します。 デフォルトはfalse（自動移動）。
pixelOffset 情報ウィンドウの先端部分と情報ウィンドウを固定するオフセット値を指定します。
position 情報をウィンドウを固定する位置の緯度・経度のLatLng値を指定します。
maxWidth maxWidthには、情報ウィンドウの最大幅を指定します（単位：ピクセル）。 maxWidthを指定した場合、その幅よりあふれる場合は、情報ウィンドウ内に縦スクロールが表示あれます。 maxWidthを指定しない場合は、吹き出し内のコンテンツ量に合わせて自動的に伸縮されます。
zIndex 情報ウィンドウの重なり順序を指定します。 数字が大きい方が前面に表示されます。

設置サンプル

下記のサンプルでは、エジプトのスフィンクスの位置（29.97516,31.137657）にマーカーを立て、マーカーをクリックするとスフィンクスの画像と説明の入った情報ウィンドウを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度：エジプト　スフィンクス */
            var myLatlng=new google.maps.LatLng(29.97516,31.137657);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: myLatlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* ★情報ウィンドウ */
            var contentString="<dl id='infowin1'><dt>スフィンクス</dt><dd><img src='/content/img/ajax/gmapv3/sphinx.gif' align='left' />スフィンクス（Sphinx）は、エジプト神話やギリシア神話、メソポタミア神話などに登場する、ライオンの身体と人間の顔を持った神聖な存在あるいは怪物。<a href='http://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%95%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%B9'>wikipedia</a>より。</dd></dl>";
            var infowindow=new google.maps.InfoWindow({
                content: contentString
            });
            var marker=new google.maps.Marker({
                position: myLatlng,
                map: map,
                title:"スフィンクス"
            });
            /* マーカーがクリックされた時に情報ウィンドウ表示 */
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
    </script>
</head>
<body>
    <h3>情報ウィンドウ</h3>
    <p>地図上のマーカーをクリックすると、情報ウィンドウを表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

情報ウィンドウの表示・非表示

2011/6/26

情報ウィンドウオブジェクト.open(map[, anchor]);
情報ウィンドウオブジェクト.close();

地図上に情報ウィンドウを表示するには、InfoWindowのopen(map[, anchor])メソッドを使用します。 第1引数に対象となる地図オブジェクトを指定し、マーカーと関連付ける場合は、第2引数に対象となるマーカーオブジェクトを指定します。

情報ウィンドウを非表示にするにはclose()メソッドを使用します。

下記のサンプルでは、エジプトのスフィンクスの位置（29.97516,31.137657）にマーカーを立て、ボタンをクリックすると情報ウィンドウを表示・非表示にします。 地図をクリックしても情報ウィンドウを閉じられるようにしています。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map, marker, infowindow;
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
            $("#btn_show").bind("click",function(){
                infowindow.open(map,marker);
                $(this).attr("disabled","disabled");
                $("#btn_hide").attr("disabled",false);
            });
            $("#btn_hide").bind("click",function(){
                infowindow.close();
                $(this).attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度：エジプト　スフィンクス */
            var myLatlng=new google.maps.LatLng(29.97516,31.137657);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: myLatlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* ★情報ウィンドウ */
            var contentString="<dl id='infowin2'><dt>スフィンクス</dt><dd><img src='/content/img/ajax/gmapv3/sphinx.gif' align='left' />スフィンクス（Sphinx）は、エジプト神話やギリシア神話、メソポタミア神話などに登場する、ライオンの身体と人間の顔を持った神聖な存在あるいは怪物。<a href='http://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%95%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%B9'>wikipedia</a>より。</dd></dl>";
            infowindow=new google.maps.InfoWindow({
                content: contentString,
                maxWidth:240
            });
            marker=new google.maps.Marker({
                position: myLatlng,
                map: map,
                title:"スフィンクス"
            });
            /* マーカーがクリックされた時 */
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
                $("#btn_show").attr("disabled","disabled");
                $("#btn_hide").attr("disabled",false);
            });
             /* 情報ウィンドウの【×】ボタンが押された時 */
            google.maps.event.addListener(infowindow, 'closeclick', function() {
                $("#btn_hide").attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
               /* 地図がクリックされた時 */
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
                $("#btn_hide").attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
        }
    </script>
</head>
<body>
    <h3>情報ウィンドウ</h3>
    <p>地図上のマーカーや下記のボタンをクリックすると、情報ウィンドウを表示・非表示にします。</p>
    <p>
        <input type="button" id="btn_show" value="情報ウィンドウ表示" />
        <input type="button" id="btn_hide" value="情報ウィンドウ非表示" disabled />
    </p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

情報ウィンドウを常に1つだけ表示する

2011/6/26

情報ウィンドウは地図上に複数表示できますが、地図上に常に1つの情報ウィンドウしか表示したくない場合は、他のマーカーをクリックしたタイミングで、情報ウィンドウが表示されているか調べ、表示されている場合はいったん閉じるようにすればOK。

下記のサンプルでは、地図上のマーカーをクリックすると、クリックしたマーカーのタイトルと緯度・経度を情報ウィンドウに表示します。 情報ウィンドウは常に1つのみ表示します。

設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map, marker, infowindow;
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度：渋谷駅、原宿駅、表参道駅 */
            var shibuya=new google.maps.LatLng(35.6585170, 139.7013340);
            var harajyuku=new google.maps.LatLng(35.6701680,139.7026870);
            var omotesando=new google.maps.LatLng(35.6652470,139.7123140);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 14,
                /* 地図の中心点 */
                center: new google.maps.LatLng(35.664148, 139.70674),
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker1=new google.maps.Marker({
                position: shibuya,
                map: map,
                title:"渋谷駅"
            });
            var marker2=new google.maps.Marker({
                position: harajyuku,
                map: map,
                title:"原宿駅"
            });
            var marker3=new google.maps.Marker({
                position: omotesando,
                map: map,
                title:"表参道駅"
            });
            /* マーカーがクリックされた時 */
            google.maps.event.addListener(marker1, 'click', function() {
                showInfoWindow(this);
            });
            google.maps.event.addListener(marker2, 'click', function() {
                showInfoWindow(this);
            });
            google.maps.event.addListener(marker3, 'click', function() {
                showInfoWindow(this);
            });
            /* 情報ウィンドウ表示 */
            function showInfoWindow(obj){
                /* 既に開かれていたら閉じる */
                if(infowindow) infowindow.close();
                infowindow=new google.maps.InfoWindow({
                    /* クリックしたマーカーのタイトルと緯度・経度を情報ウィンドウに表示 */
                    content:obj.getTitle()+"<br>"+obj.getPosition().lat()+", "+obj.getPosition().lng(),
                });
                infowindow.open(map,obj);
            }
        }
    </script>
</head>
<body>
    <h3>情報ウィンドウ</h3>
    <p>地図上のマーカーをクリックすると、マーカーのタイトルと緯度・経度を情報ウィンドウに表示します。情報ウィンドウは常に1つのみ表示します（他のマーカーをクリックすると、表示されている情報ウィンドウはいったん閉じます）。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

情報ウィンドウの吹き出しをカスタマイズ

2011/6/26

参照：Custom InfoWindow by Pamela Fox

設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map, marker, infowindow;
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        var openFlag=false;
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度：渋谷駅、原宿駅、表参道駅 */
            var omotesando=new google.maps.LatLng(35.710139,139.810833);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom:13,
                /* 地図の中心点 */
                center: omotesando,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker=new google.maps.Marker({
                position: omotesando,
                map: map,
                title:"とうきょうスカイツリー"
            });
            var infowindow = new InfoBox({latlng: marker.getPosition(), map: map});
            openFlag=true;
            google.maps.event.addListener(marker, "click", function(e) {
                if(!openFlag){
                    infowindow = new InfoBox({latlng: marker.getPosition(), map: map});
                    openFlag=true;
                }else{
                    infowindow.remove();
                    openFlag=false;
                }
            });
             //google.maps.event.trigger(marker, "click");
            /* 情報ウィンドウ表示
            function showInfoWindow(obj){
                if(infowindow) infowindow.close();
                infowindow=new google.maps.InfoWindow({
                    content:obj.getTitle()+"<br>"+obj.getPosition().lat()+", "+obj.getPosition().lng(),
                });
                infowindow.open(map,obj);
            } */
        }



function InfoBox(opts) {
    google.maps.OverlayView.call(this);
    this.latlng_ = opts.latlng;
    this.map_ = opts.map;
    this.offsetVertical_ = -100;
    this.offsetHorizontal_ = -90;
    this.height_ = 66;
    this.width_ = 178;
    var me = this;
    this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
        return me.panMap.apply(me);
    });
    // Once the properties of this OverlayView are initialized, set its map so
    // that we can display it.  This will trigger calls to panes_changed and
    // draw.
    this.setMap(this.map_);
}
/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();
/* Creates the DIV representing this InfoBox
 */
InfoBox.prototype.remove = function() {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};
/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function() {
  // Creates the element if it doesn't exist already.
  this.createElement();
  if (!this.div_) return;
 
  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (!pixPosition) return;
 
  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
};
 
/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
 * object, retrieved by calling getPanes, is null, remove the element from the
 * DOM.  If the div exists, but its parent is not the floatPane, move the div
 * to the new pane.
 * Called from within draw.  Alternatively, this can be called specifically on
 * a panes_changed event.
 */
InfoBox.prototype.createElement = function() {
  var panes = this.getPanes();
  var div = this.div_;
  if (!div) {
    // This does not handle changing panes.  You can set the map to be null and
    // then reset the map to move the div.
    div = this.div_ = document.createElement("div");
    div.style.border = "0px none";
    div.style.position = "absolute";
    div.style.background = "url('/content/img/ajax/gmapv3/speech.png')";
    div.style.width = this.width_ + "px";
    div.style.height = this.height_ + "px";
    var contentDiv = document.createElement("div");
    contentDiv.style.padding = "0 0 0 10px"
    contentDiv.style.color = "#fff"
    contentDiv.innerHTML = "<b>とうきょうスカイツリー</b>";
 
    var topDiv = document.createElement("div");
    topDiv.style.textAlign = "right";
    var closeImg = document.createElement("img");
    closeImg.style.width = "16px";
    closeImg.style.height = "16px";
    closeImg.style.cursor = "pointer";
    closeImg.src = "/content/img/ajax/gmapv3/close.gif";
    topDiv.appendChild(closeImg);
 
    function removeInfoBox(ib) {
      return function() {
          openFlag=false; //add
        ib.setMap(null);
      };
    }
 
    google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
 
    div.appendChild(topDiv);
    div.appendChild(contentDiv);
    div.style.display = 'none';
    panes.floatPane.appendChild(div);
    this.panMap();
  } else if (div.parentNode != panes.floatPane) {
    // The panes have changed.  Move the div.
    div.parentNode.removeChild(div);
    panes.floatPane.appendChild(div);
  } else {
    // The panes have not changed, so no need to create or move the div.
  }
}
 
/* Pan the map to fit the InfoBox.
 */
InfoBox.prototype.panMap = function() {
  // if we go beyond map, pan map
  var map = this.map_;
  var bounds = map.getBounds();
  if (!bounds) return;
 
  // The position of the infowindow
  var position = this.latlng_;
 
  // The dimension of the infowindow
  var iwWidth = this.width_;
  var iwHeight = this.height_;
 
  // The offset position of the infowindow
  var iwOffsetX = this.offsetHorizontal_;
  var iwOffsetY = this.offsetVertical_;
 
  // Padding on the infowindow
  var padX = 40;
  var padY = 40;
 
  // The degrees per pixel
  var mapDiv = map.getDiv();
  var mapWidth = mapDiv.offsetWidth;
  var mapHeight = mapDiv.offsetHeight;
  var boundsSpan = bounds.toSpan();
  var longSpan = boundsSpan.lng();
  var latSpan = boundsSpan.lat();
  var degPixelX = longSpan / mapWidth;
  var degPixelY = latSpan / mapHeight;
 
  // The bounds of the map
  var mapWestLng = bounds.getSouthWest().lng();
  var mapEastLng = bounds.getNorthEast().lng();
  var mapNorthLat = bounds.getNorthEast().lat();
  var mapSouthLat = bounds.getSouthWest().lat();
 
  // The bounds of the infowindow
  var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
  var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
  var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
  var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;
 
  // calculate center shift
  var shiftLng =
      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
  var shiftLat =
      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
 
  // The center of the map
  var center = map.getCenter();
 
  // The new map center
  var centerX = center.lng() - shiftLng;
  var centerY = center.lat() - shiftLat;
 
  // center the map to the new shifted center
  map.setCenter(new google.maps.LatLng(centerY, centerX));
 
  // Remove the listener after panning is complete.
  google.maps.event.removeListener(this.boundsChangedListener_);
  this.boundsChangedListener_ = null;
};
    </script>
</head>
<body>
    <h3>情報ウィンドウのカスタマイズ</h3>
    <p>参照：<a href='http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html'>Custom InfoWindow by Pamela Fox</a></p>
    <p>openFlagを追加して、マーカークリックで、情報ウィンドウを開閉できるようにしてみました。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

情報ウィンドウの吹き出しをカスタマイズ
InfoBox

2011/6/26

GoogleMapsの情報ウィンドウをカスタマイズする際に便利なライブラリです。

参照：InfoBox: google-maps-utility-library-v3（リファレンス）

モバイルだと情報ウィンドウの幅をCSSで頑張っても強制的に300pxほどに固定表示されてしまうのですが、このライブラリを使って情報ウィンドウをカスタマイズしたら任意の幅で表示することが出来ました。

情報ウィンドウのイベントがほぼそのまま使え、見た目はCSSで自由に変えられます。 オプションで、サイズや透明度、情報ウィンドウを閉じるボタンの画像や位置調整などができます。

情報ウィンドウ内でのイベント制御について

InfoBoxは情報ウィンドウ内で起こるイベントがすべてキャンセルされるようになっています。

情報ウィンドウ内で、以下のようにa要素のhrefでリンクさせる場合はそのままでも動作しますが、 

<a href='https://www.youtube.com/watch?v=xMLJf_YqRCU' class='button' target='_blank'>この動画をYouTubeで見る(href)</a>

以下のように情報ディンドウ内のリンクを、jQueryで制御する場合は、そのままだとクリックしてもなにもおこりませんので、 以下のinfoBox.js内でキャンセルするイベントを定義しているところから、"click"をとりましょう。 

<a href='#' class='button' target='_blank' rel='xMLJf_YqRCU' id='btn'>この動画をYouTubeで見る(on)</a>

$('#map_canvas').on('click', 'a', function(event){
	if($(this).attr('id')=='btn'){
		$(this).attr('href','https://www.youtube.com/watch?v='+$(this).attr('rel'));
	}
});

events = ['mousedown', 'mouseover', 'mouseout', 'mouseup', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'];
▼
events = ['mousedown', 'mouseover', 'mouseout', 'mouseup', 'dblclick', 'touchstart', 'touchend', 'touchmove'];

設置サンプル

以下のサンプルでは、InfoBoxで情報ウィンドウをカスタマイズして、情報ウィンドウ内に幅560pxのYouTube動画を埋め込んでみました。 マーカークリックで、情報ウィンドウを開閉できます。 viewportは指定していません。

マーカーは、スカイツリーのアイコンにしてみました。 使用した素材は、東京の新名所 東京スカイツリーのシルエット素材。 マーカーのカスタマイズ方法はこちらで解説しています。

iPhone4 - SafariiPhone4 - Safari
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <style>
        #map_canvas { width:100%; height:100%; margin:0; padding:0; }
        .infowin {
            background:#000;
            color:#fff;
            padding:5px;
            margin-bottom:20%;
            margin-top:5px;
        }
        .infowin iframe {
            display:block;
            margin:0 auto; padding:0;
            box-sizing:border-box;
        }
        .infowin p {
            margin:5px; padding:0;
        }
    </style>
    <!-- Google Maps APIの読み込み -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="/content/lib/gmapv3/infobox.js"></script>
    <script>
        var map;
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        var openFlag=new Array();
        var overlays=new Array();

        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度：スカイツリー */
            var point=new google.maps.LatLng(35.710139,139.810833);
            /* 地図のオプション設定 */
            var mapOptions={
                /*初期のズーム レベル */
                zoom:12,
                /* 地図の中心点 */
                center:point,
                /* 地図タイプ */
                 mapTypeId:google.maps.MapTypeId.ROADMAP,
                   styles:[{elementType:'all'}]
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            
            /* マーカー画像 */
            var image=new google.maps.MarkerImage("/content/img/ajax/gmapv3/infowindow/marker_skytree.png",
                new google.maps.Size(44.0, 200.0),
                new google.maps.Point(0, 0),
                new google.maps.Point(22.0, 100.0)
            );
            /* マーカーの影画像 */
            var shadow=new google.maps.MarkerImage("/content/img/ajax/gmapv3/infowindow/marker_skytree_shadow.png",
                new google.maps.Size(145.0, 200.0),
                new google.maps.Point(0, 0),
                new google.maps.Point(22.0, 100.0)
            );
            /* マーカー */
            var marker=new google.maps.Marker({
                position: point,
                map: map,
                title:"とうきょうスカイツリー",
                icon:image,
                shadow:shadow
            });
            var s="";
            s+='<iframe width="560" height="315" src="https://www.youtube.com/embed/xMLJf_YqRCU?rel=0&autohide=1" frameborder="0" allowfullscreen></iframe>';
            s+="<p>節電中とかで前半分だけのライトアップ。夜空にそびえたつ白い巨塔はとっても幻想的で­した。</p>";
            s+="<p><a href='https://www.youtube.com/watch?v=xMLJf_YqRCU' class='button' target='_blank'>この動画をYouTubeで見る(href)</a></p>";
            s+="<p><a href='#' class='button' target='_blank' id='btn' rel='xMLJf_YqRCU'>この動画をYouTubeで見る(on)</a></p>";
            var infoWindowWidth=570; /* 情報ウィンドウの幅 */
            var myOptions={
                content:"<div class='infowin'>"+s+"</div>",
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-(infoWindowWidth/2), 100),
                zIndex: null,
                boxStyle: { 
                    background: "url('/content/img/ajax/gmapv3/tipbox.gif') no-repeat center top",
                    opacity: 0.95, /* 情報ウィンドウの透明度 */
                    width:infoWindowWidth+"px"
                },
                closeBoxMargin: "5px 0 0 0",
                closeBoxURL:"/content/img/ajax/gmapv3/close.gif",
                infoBoxClearance: new google.maps.Size(1,1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };
            var infowindow=new InfoBox(myOptions);
            infowindow.open(map, marker);
            
            marker.set("id", 0);
            infowindow.set("id", 0);
            overlays.push([marker, infowindow]);
            openFlag[0]=1;

            /* マーカークリックで情報ウィンドウトグル */
            google.maps.event.addListener(marker, 'click', function(e){
                var id=this.get("id");
                var infowindow=overlays[id][1];
                if(openFlag[id]==0){
                    infowindow.open(map, this);
                    openFlag[id]=1;
                }else{
                    infowindow.close();
                    openFlag[id]=0;
                }
            });
            /* 閉じるボタンを押した時 */
            google.maps.event.addListener(infowindow, 'closeclick', function() {
                var id=this.get("id");
                openFlag[id]=0;
            });
            $("#map_canvas").on("click", "a", function(event){
                if($(this).attr("id")=="btn"){
                    $(this).attr('href',"https://www.youtube.com/watch?v="+$(this).attr("rel"));
                }else{
                    return false;
                }
            });
        }
    </script>
</head>
<body>
    <h3>情報ウィンドウのカスタマイズ</h3>
    <p>参照：<a href='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/'>InfoBox: google-maps-utility-library-v3</a></p>
    <p>素材：<a href='http://kage-design.com/wp/?p=687'>東京の新名所 東京スカイツリーのシルエット素材</a></p>
    <p>InfoBoxで情報ウィンドウをカスタマイズしてみました。マーカークリックで、情報ウィンドウを開閉できます。情報ウィンドウ内にはYouTube動画を埋め込んでいます。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women