Googleマップ-イベント

Google Maps JavaScriptプログラムは、ユーザーが生成したさまざまなイベントに応答できます。この章では、Googleマップを操作しながらイベント処理を実行する方法を示す例を示します。

イベントリスナーの追加

メソッド* addListener（）*を使用して、イベントリスナーを追加できます。リスナー、イベントの名前、ハンドラーイベントを追加するオブジェクト名などのパラメーターを受け入れます。

例

次の例は、イベントリスナーをマーカーオブジェクトに追加する方法を示しています。プログラムは、マーカーをダブルクリックするたびに、マップのズーム値を5ずつ上げます。

<!DOCTYPE html>
<html>

   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>

      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){

            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });

            marker.setMap(map);

           //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

それは次の出力を生成します-

クリック時に情報ウィンドウを開く

次のコードは、マーカーをクリックすると情報ウィンドウを開きます-

<!DOCTYPE html>
<html>

   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>

      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){

            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var marker = new google.maps.Marker({
               position:myCenter,
            });

            marker.setMap(map);

            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });

            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

それは次の出力を生成します-

リスナーの削除

メソッド* removeListener（）*を使用して、既存のリスナーを削除できます。このメソッドはリスナーオブジェクトを受け入れるため、リスナーを変数に割り当ててこのメソッドに渡す必要があります。

例

次のコードは、リスナーを削除する方法を示しています-

<!DOCTYPE html>
<html>

   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>

      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){

            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

            var marker = new google.maps.Marker({
               position:myCenter,
            });

            marker.setMap(map);

            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });

            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });

            google.maps.event.removeListener(myListener);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>

</html>

それは次の出力を生成します-

Google-maps-events

目次

Googleマップ-イベント

イベントリスナーの追加

例

クリック時に情報ウィンドウを開く

リスナーの削除

例