[JavaScript] Google Maps API V3 でマーカーから情報ウィンドウを表示させてみた

[JavaScript] Google Maps API V3 でマーカーから情報ウィンドウを表示させてみた

Google Maps API V3 で、追加したマーカーをクリックしたときに情報ウィンドウを表示させてみました。

Reference

Google公式のリファレンスを参考にしました。

Markerに情報ウィンドウを表示させる

追加したMarkerに情報ウィンドウを表示してみました。

1. Mapクラスを生成

MapOptionsオブジェクトの設定して、Mapクラスの引数に指定します。

var op={
  zoom:15,
  center:new google.maps.LatLng(35.507456,139.617585),
  mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_canvas"),op);

2. Markerクラスを生成

MarkerOptionsオブジェクトの設定して、Markerクラスの引数に指定します。

var obj={
  position:new google.maps.LatLng(35.507456,139.617585),
  map:map
};
var marker=new google.maps.Marker(obj);

3. Markerに情報ウィンドウを表示させる

InfoWindowOptionsオブジェクトを設定して、InfoWindowクラスを生成します。
生成したInfoWindowを使って、自動的にMarkerから情報ウィンドウを表示させます。

content には、HTMLのソースが指定できるので、画像やリンクを貼ったりもできます。

var info=new google.maps.InfoWindow({content:'<p>新横浜駅</p>'});
info.open(map,marker);

4. Markerがクリックされたときに、情報ウィンドウを表示させる

イベントリスナーを使って、Markerがクリックされたときに情報ウィンドウを表示させます。

google.maps.event.addListener(marker,'click',function(){
  info.open(map,marker);
});

まとめ

１〜４をまとめると以下のようになります。

<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
// <![CDATA[
window.onload=function(){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);

  var obj={
    position:new google.maps.LatLng(35.507456,139.617585),
    map:map
  };
  var marker=new google.maps.Marker(obj);

  var info=new google.maps.InfoWindow({content:'<p>新横浜駅</p>'});
  info.open(map,marker);

  google.maps.event.addListener(marker,'click',function(){
    info.open(map,marker);
  });
}
// ]]>
</script>
</head>
<body>
<div id="map_canvas" style="width:550px;height:400px"></div>
</body>

サンプル

情報ウィンドウにストリートビューを追加してみる

少し追加で修正して、情報ウィンドウの中にストリートビューを追加してみました。

やり方は正しいか分かりませんが、情報ウィンドウにDIVを指定して開いたときに StreetViewPanoramaクラスを設定するようにしています。

StreetViewPanoramaOptionsオブジェクトを設定するときに、pov でカメラの角度、相対的なカメラのピッチ、ズームレベルを指定できます。

<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
// <![CDATA[
window.onload=function(){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);

  var obj={
    position:new google.maps.LatLng(35.507456,139.617585),
    map:map
  };
  var marker=new google.maps.Marker(obj);

  var info=new google.maps.InfoWindow({content:'<div id="streetview" style="width:200px;height:150px"></div>'});
  google.maps.event.addListener(marker,'click',function(){
    info.open(map,marker);
  });

  var panoOptions={
    position:new google.maps.LatLng(35.507456,139.617585),
    addressControl:false,
    linksControl:true,
    navigationControl:true,
    navigationControlOptions:{position:google.maps.ControlPosition.RIGHT,style:google.maps.NavigationControlStyle.SMALL},
    panControl:true,
    panControlOptions:{position:google.maps.ControlPosition.TOP_LEFT},
    enableCloseButton:false,
    pov:{heading:0,pitch:0,zoom:1}
  }
  google.maps.event.addListener(info,'domready',function(){
    var panorama=new google.maps.StreetViewPanorama(document.getElementById("streetview"),panoOptions);
  });

  info.open(map,marker);
}
// ]]>
</script>
</head>
<body>
<div id="map_canvas" style="width:550px;height:400px"></div>
</body>

サンプル

  • 2011.04.08
  • Hiroaki Komatsu