WordPressにGoogle Maps API V3！

Google Maps API v3で地図を表示させたので、こんどはやはりマーカーとインフォウィンドウ（情報ウィンドウ）を表示させてみる。マーカとインフォウィンドウは最低限使います。

先生は、googleコードのインフォウィンドウの箇所。オーストラリアの中央にマーカーを表示し、マーカーをクリックすると情報ウィンドウが表示されるもの。

◆Google Maps V3　インフォウィンドウ

うーむ。気になったのは、インフォウィンドウの大きさ。

設定は、情報ウィンドウのサイズは自動調整だが、設定出来るようだ。なお、インフォウィンドウの縦・横スクロールを無効にするには、どうしたらいい？

（InfoWindowOptions オブジェクトの仕様）

◆参考記述

<script type=”text/javascript”>

function initialize()

{

var myLatlng = new google.maps.LatLng(35.71634, 139.51701);

var myOptions =

{

zoom: 8,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP　//★地図種類指定

}

var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

//－－－－－－－－－－－インフォウィンドウ－－－－－－－－－－－－－

var contentString =  ‘小金井公園 ‘+'<p><a href=”http://waox.main.jp/news/” target=”_blank”>参照Webサイト</a></p>';

var infowindow = new google.maps.InfoWindow(

{

content: contentString

});

//－－－－－－－－－－－マーカ－－－－－－－－－－－－－

var marker = new google.maps.Marker(

{

position: new google.maps.LatLng(35.71634, 139.51701),  //★マーカ位置

map: map,

title: ‘小金井公園’,  //★タイトル位置

icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’, //★アイコン指定

clickable: true,  //★クリック有効無効

draggable: true  //★アイコンの移動の有効無効

});

//－－－－－－－－－－－インフォウィンドウ呼び出し－－－－－－－－－－－－－

google.maps.event.addListener(marker, ‘click’, function()

{

infowindow.open(map,marker);

});

}

</script>

◆Google Maps JavaScript API V3　サンプル

• アイコン+インフォウィンドウ表示

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク