スポンサードリンク

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

◆ 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

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">