「GoogleMaps API V3」マーカーのイベントで情報ウインドウを表示

「GoogleMaps API V3」の使い方その５（続イベント）

今回は地図の上の、マーカーをクリックした時に情報ウインドウを表示したいと思います。

■マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、クリックイベントの関数の中でその情報ウインドウを表示する様にしています。

01<head>
02<title>Google Map API v3-5</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
15    // マーカーを生成
16    var gmarker = new google.maps.Marker({
17        map: gmap,
18        position: latlng,
19        title: "福井駅"
20    });
21    // 情報ウィンドウの生成
22    var infoWindow = new google.maps.InfoWindow({
23        content: "InfoWindow - test",
24        maxWidth: 200
25    });
26    // マーカーのクリックイベントの関数登録
27    google.maps.event.addListener(gmarker, 'click', function(event) {
28        // 情報ウィンドウの表示
29        infoWindow.open(gmap, gmarker);
30    });
31}
32</script>
33</head>
34<body onload="initialize()">
35    <div id="map" style="width: 300px; height: 300px;"></div>
36</body>
37</html>

■複数のマーカーイベントで情報ウインドウを表示

「使い方その３（マーカーの表示）」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときにそれぞれのマーカーの内容を表示する例を示します。

01<head>
02<title>Google Map API v3-5</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05// GoogleMapオブジェクトの変数宣言
06var gmap;
07 
08function initialize() {
09    // Google Mapで利用する初期設定用の変数
10    var latlng = new google.maps.LatLng(36.062092, 136.223323);
11    var mapOptions = {
12        zoom: 14,
13        mapTypeId: google.maps.MapTypeId.ROADMAP,
14        center: latlng
15    };
16    // GoogleMapの生成
17    gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
18 
19    // ５個のマーカー(座標に特に意味は無い)
20    var markerData = [
21        { lat:"36.065487", lng:"136.230723", title:"marker-1" },
22        { lat:"36.067258", lng:"136.220604", title:"marker-2" },
23        { lat:"36.063794", lng:"136.220264", title:"marker-3" },
24        { lat:"36.062456", lng:"136.230704", title:"marker-4" },
25        { lat:"36.061456", lng:"136.220904", title:"marker-5" }
26    ];
27    for (i = 0;i < markerData.length;i++) {
28        // マーカーを生成
29        var marker = new google.maps.Marker({
30            map: gmap,
31            position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
32            title: markerData[i].title
33        });
34        // 情報ウインドウの生成とクリックイベント関数の登録処理
35        setMarkerListener(marker, markerData[i].title);
36    }
37}
38 
39// 情報ウインドウの生成とクリックイベント関数の登録処理
40function setMarkerListener(marker, title) {
41    // 情報ウィンドウの生成
42    var infoWindow = new google.maps.InfoWindow({
43        content: title,
44        maxWidth: 200
45    });
46    // マーカーのクリックイベントの関数登録
47    google.maps.event.addListener(marker, 'click', function(event) {
48        // 情報ウィンドウの表示
49        infoWindow.open(gmap, marker);
50    });
51}
52</script>
53</head>
54<body onload="initialize()">
55    <div id="map" style="width: 400px; height: 400px;"></div>
56</body>
57</html>

最初の例で説明しましたイベントの処理とは、少し変わった部分があります。先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。
これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。
各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられてクリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったままになっています。
それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。

01<head>
02<title>Google Map API v3-5</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05// GoogleMapオブジェクトの変数宣言
06var gmap;
07 
08function initialize() {
09    // Google Mapで利用する初期設定用の変数
10    var latlng = new google.maps.LatLng(36.062092, 136.223323);
11    var mapOptions = {
12        zoom: 14,
13        mapTypeId: google.maps.MapTypeId.ROADMAP,
14        center: latlng
15    };
16    // GoogleMapの生成
17    gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
18 
19    // ５個のマーカー(座標に特に意味は無い)
20    var markerData = [
21        { lat:"36.065487", lng:"136.230723", title:"marker-1" },
22        { lat:"36.067258", lng:"136.220604", title:"marker-2" },
23        { lat:"36.063794", lng:"136.220264", title:"marker-3" },
24        { lat:"36.062456", lng:"136.230704", title:"marker-4" },
25        { lat:"36.061456", lng:"136.220904", title:"marker-5" }
26    ];
27    for (i = 0;i < markerData.length;i++) {
28        // マーカーを生成
29        var marker = new google.maps.Marker({
30            map: gmap,
31            position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
32            title: markerData[i].title
33        });
34        // 情報ウィンドウの生成
35        var infoWindow = new google.maps.InfoWindow({
36            content: markerData[i].title,
37            maxWidth: 200
38        });
39        // マーカーのクリックイベントの関数登録
40        google.maps.event.addListener(marker, 'click', function(event) {
41            alert("marker:"+this.getTitle());
42            // 情報ウィンドウの表示
43            infoWindow.open(gmap, marker);
44        });
45    }
46}
47</script>
48</head>
49<body onload="initialize()">
50    <div id="map" style="width: 400px; height: 400px;"></div>
51</body>
52</html>

「GoogleMaps API V3」 の使い方その５（続イベント）

■マーカーのイベントで情報ウインドウを表示

■複数のマーカーイベントで情報ウインドウを表示

■関連記事

「GoogleMaps API V3」の使い方その５（続イベント）