「GoogleMaps API V3」マップのイベントとマーカーのイベントの複合的な使い方

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

■マップのイベントとマーカーのイベントの複合的な使い方

マップ上でクリックした位置にマーカーを表示し、さらにそのマーカーをクリックした時にマーカーの緯度経度の値を情報ウインドウに表示します。

この例は、Googleのサンプルとして乗っているものを変更したものです。
マップ上でのクリックイベント時の関数を設定し、その中でマーカーを生成し、さらに情報ウインドウの表示を行うように、マーカーのクリックイベント時の関数を設定しています。

また、マーカーを生成した時に、そのマーカーをグローバル変数の配列に保存し、その配列のマーカーを使って、再表示、クリア、削除処理を行っています。

01<head>
02<title>Google Map API v3-6</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">
05var map;          // GoogleMapオブジェクトの変数宣言
06var markers = []; // マーカー保存配列
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    map = new google.maps.Map(document.getElementById("map"), mapOptions);
18    // マップのクリックイベントの関数登録
19    google.maps.event.addListener(map, 'click', function(event) {
20    // マップ上の位置でマーカーを生成
21        addMarker(event.latLng);
22    });
23}
24// マーカーの生成関数
25function addMarker(location) {
26    // マーカーを生成
27    marker = new google.maps.Marker({
28        position: location,
29        map: map
30    });
31    // 情報ウインドウの生成とクリックイベント関数の登録処理
32    setMarkerListener(marker, location);
33    // 生成されたマーカーを保存
34    markers.push(marker);
35}
36// 情報ウインドウの生成とクリックイベント関数の登録処理
37function setMarkerListener(marker, location) {
38    // 表示文字列の生成(緯度・経度)
39    var contentString = "lat:" + location.lat() + "<br>"
40                      + "lng:" + location.lng();
41    // 情報ウィンドウの生成
42    var infoWindow = new google.maps.InfoWindow({
43        content: contentString,
44        maxWidth: 200
45    });
46    // マーカーのクリックイベントの関数登録
47    google.maps.event.addListener(marker, 'click', function(event) {
48        // 情報ウィンドウの表示
49        infoWindow.open(map, marker);
50    });
51}
52// マップからマーカーの画像を消す(保存されたマーカーはそのまま)
53function clearMarkers() {
54    if (markers) {
55        for (i in markers) {
56            markers[i].setMap(null);
57        }
58    }
59}
60// 保存されたマーカーをマップ上に表示
61function showMarkers() {
62    if (markers) {
63        for (i in markers) {
64            markers[i].setMap(map);
65        }
66    }
67}
68// マップからマーカーの画像を消し、マーカーも削除
69function deleteMarkers() {
70    if (markers) {
71        clearMarkers();
72        markers.length = 0;
73    }
74}
75</script> 
76</head> 
77<body onload="initialize();">
78  マップ上をクリックするとマーカーを表示します。<br>
79  さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。
80  <div>
81    <input onclick="clearMarkers();"  type=button value="マーカー消去"/>
82    <input onclick="showMarkers();"   type=button value="マーカー表示"/>
83    <input onclick="deleteMarkers();" type=button value="マーカー削除"/> 
84  </div> 
85  <div id="map" style="width: 400px; height: 300px;"></div>
86</body> 
87</html> 

マップ上をクリックするとマーカーを表示します。そのマーカーをクリックすると緯度経度をウインドウに表示します。さらに他の位置でクリックを続けると、複数のマーカーの表示ができます。

いくつかのマーカーがマップ上に表示されたあとで、「マーカー消去」ボタンをクリックすると全てのマーカーを非表示にします。その後、「マーカー表示」ボタンをクリックすると全てのマーカーを再度表示します。
「マーカー削除」ボタンをクリックで、記憶している全てのマーカーを削除します。

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

■マップのイベントとマーカーのイベントの複合的な使い方

■関連記事

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