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

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

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

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

この例は、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」 の使い方その６（続々イベント）

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

■関連記事

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