「GoogleMaps API V3」 の使い方その6(続々イベント)


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

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

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

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

<head>
<title>Google Map API v3-6</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
<script type="text/javascript">
var map;          // GoogleMapオブジェクトの変数宣言
var markers = []; // マーカー保存配列

function initialize() {
    // Google Mapで利用する初期設定用の変数
    var latlng = new google.maps.LatLng(36.062092, 136.223323);
    var mapOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
    };
    // GoogleMapの生成
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    // マップのクリックイベントの関数登録
    google.maps.event.addListener(map, 'click', function(event) {
	// マップ上の位置でマーカーを生成
        addMarker(event.latLng);
    });
}
// マーカーの生成関数
function addMarker(location) {
    // マーカーを生成
    marker = new google.maps.Marker({
        position: location,
        map: map
    });
    // 情報ウインドウの生成とクリックイベント関数の登録処理
    setMarkerListener(marker, location);
    // 生成されたマーカーを保存
    markers.push(marker);
}
// 情報ウインドウの生成とクリックイベント関数の登録処理
function setMarkerListener(marker, location) {
    // 表示文字列の生成(緯度・経度)
    var contentString = "lat:" + location.lat() + "<br>"
                      + "lng:" + location.lng();
    // 情報ウィンドウの生成
    var infoWindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
    });
    // マーカーのクリックイベントの関数登録
    google.maps.event.addListener(marker, 'click', function(event) {
        // 情報ウィンドウの表示
        infoWindow.open(map, marker);
    });
}
// マップからマーカーの画像を消す(保存されたマーカーはそのまま)
function clearMarkers() {
    if (markers) {
        for (i in markers) {
            markers[i].setMap(null);
        }
    }
}
// 保存されたマーカーをマップ上に表示
function showMarkers() {
    if (markers) {
        for (i in markers) {
            markers[i].setMap(map);
        }
    }
}
// マップからマーカーの画像を消し、マーカーも削除
function deleteMarkers() {
    if (markers) {
        clearMarkers();
        markers.length = 0;
    }
}
</script> 
</head> 
<body onload="initialize();">
  マップ上をクリックするとマーカーを表示します。<br>
  さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。
  <div>
    <input onclick="clearMarkers();"  type=button value="マーカー消去"/>
    <input onclick="showMarkers();"   type=button value="マーカー表示"/>
    <input onclick="deleteMarkers();" type=button value="マーカー削除"/> 
  </div> 
  <div id="map" style="width: 400px; height: 300px;"></div>
</body> 
</html> 

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

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

     


■関連記事
「GoogleMaps API V3」の使い方その1
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る