WordPressにGoogle Maps API V3！

◆インフォウィンドウを1つだけ表示する方法

Google Maps API ｖ3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。

XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。

• 別のXMLファイルに記述したデータ読み込み
• 700マーカー以上を表示させてみた。

しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。

• アイコン（マーカー）の種類を変更するサンプル

え～。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。

良くわからんので、Googleのサンプルを探してたらありました。

Googleが公開した1つのアイコンだけインフォウィンドウを開くサンプルは、あるマーカーのインフォウィンドウが開いている状態で、次のアイコンをクリックすると、前に開いていたインフォウィンドウが閉じる。または地図上のどこでもいいからクリックすると開いているインフォウィンドウが閉じる。これで、常に地図上に表示されるインフォウィンドウは、1つだけになる。

やっぱり、この方がいいよな。インフォウィンドが重なると見えなくなるし、邪魔だし・・・・。

ちょいとGoogle公開のサンプルに手をいれて・・・・と思ったらうまく動かんので後回し。別のこんな案があったので試したらうまくいきました（参照先：Google Map活用講座）。但し、このサンプルだと、あくまで次のマーカーをクリックしないと、インフォウィンドウは消えません。上記Googelサンプルは、アイコンでも地図上でもOKのちがいがありました。

◆Script

<script type=”text/javascript”>

var currentInfoWindow = null;

function initialize() {

var myLatlng = new google.maps.LatLng(35.70749, 139.61975);

var myOptions = {

zoom: 10,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

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

var LatLng1 = new google.maps.LatLng(35.71634, 139.51701);　//★マーカ位置

var contentString1 =

‘小金井公園 ‘+

‘<p><a href=”http://waox.main.jp/news/?page_id=1013″ target=”_blank”>Google Maps API V3 ページ</a></p>';   　//★インフォウィンドウ記述

var infowindow1 = new google.maps.InfoWindow({

content: contentString1

});

var image1 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’,　//★マーカ種類

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

var shadow1 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png’,　　//★マーカ影

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));;

var marker1 = new google.maps.Marker({　　//★マーカ追加

position: LatLng1,

map: map,

title: “小金井公園”,

icon: image1,

shadow: shadow1

});

google.maps.event.addListener(marker1, ‘click’, function() {　　//★クリックアクション

if (currentInfoWindow) {

currentInfoWindow.close();

}

infowindow1.open(map, marker1);

currentInfoWindow = infowindow1;

});

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

var LatLng2 = new google.maps.LatLng(35.68135, 139.76571);

var contentString2 =

‘東京駅 ‘+

‘<p><a href=”http://waox.main.jp/news/” target=”_blank”>ブログトップページ</a></p>';

var infowindow2 = new google.maps.InfoWindow({

content: contentString2

});

var image2 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/rail.png’,

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

var shadow2 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/rail.shadow.png’,

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));;

var marker2 = new google.maps.Marker({

position: LatLng2,

map: map,

title: “東京駅”,

icon: image2,

shadow: shadow2

});

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

if (currentInfoWindow) {

currentInfoWindow.close();

}

infowindow2.open(map, marker2);

currentInfoWindow = infowindow2;

});

}

window.onload = initialize;

</script>

◆Google Maps JavaScript API V3　サンプル

• 常にインフォウィンドウが1つだけ表示されるサンプル表示

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク