WordPressにGoogle Maps API V3！

◆ Google Maps API v3 / インフォウィンドウのサイズの大きさを指定する方法

インフォウィンドウのサイズ指定についてメモ。

インフォウィンドウっていざいろいろやろうとすると結構難しい。

何も指定しなくとも画像を指定すれば、勝手にちょうど良い大きさに変わってくれるのですが・・・・・・・・

大きさを指定したい場合は、次の案があります。

1.divにサイズを指定する

	var contentString =  '<div style="width : 435px;height : 325px;">'+ //インフォウィンドウのサイズを指定
	'<b>大國魂神社</b><br>'+
	'<img src="http://waox.main.jp/maps/photo/ookuni.jpg" width="240" height="180" border="0" />'+
	'</div>';　

	var infowindow = new google.maps.InfoWindow(
	{
	position: myLatlng,
	content: contentString
	});

2.スタイルシートに大きさを指定する方法

<style type="text/css" >

#infodiv{
width:300px;
height:250px;
}

</style>

上記を指定して・・・

	var contentString =  '<div id="infodiv">'+ //インフォウィンドウのサイズを指定
	'<b>大國魂神社</b><br>'+
	'<img src="http://waox.main.jp/maps/photo/ookuni.jpg" width="240" height="180" border="0" />'+
	'</div>';　

	var infowindow = new google.maps.InfoWindow(
	{
	position: myLatlng,
	content: contentString
	});

なお、YouTubeの動画を貼り付けてみましたが・・・・Chrome,safariでうまく表示されない問題がありました。

◆ Google Maps API v3　インフォウィンドウのサイズの大きさを指定変更するサンプルデモ

• インフォウィンドウのサイズの大きさを指定変更する方法

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク