y2blog » Google Maps のイベント処理

3

27

2016

Google Maps のイベント処理

Google Maps のイベント処理のサンプル


Google Developersの “Google Maps JavaScript API” ページにGoogle Mapsで発生するイベントの種類をほぼリアルタイムで画面上に表示させるサンプルが載っている.Google Mapsの機能をフルに活用したカスタムWEBマップを作成する際の参考にすると良いだろう.

  https://developers.google.com/maps/documentation/javascript/events



サンプルコード


<!DOCTYPE html>
<html>
<head>
    <title>Google Map Events Explorer</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #google_map_div {
        height: 100%;
      }
      .event {
        transition: background-color 0.5s ease-out;
        padding-bottom: 2px;
      }
      #google_map_div {
        float: left;
        width: 500px;
        height: 400px;
        margin-right: 6px;
      }
      #events {
        padding: 2px;
        overflow: hidden;
        font-size: 15px;
        font-family: 'Droid Sans Mono', monospace;
      }
      .active {
        background-color: #99FFCC;
      }
      .inactive {
        background-color: white;
      }
</style>
    
<script type='text/javascript' src='https://maps.google.com/maps/api/js?sensor=false&libraries=geometry&ver=4.4.2'></script>
 
<script>
var events = [
  'bounds_changed', 'center_changed', 'click',
  'dblclick', 'drag', 'dragend',
  'dragstart', 'heading_changed', 'idle',
  'maptypeid_changed', 'mousemove', 'mouseout',
  'mouseover', 'projection_changed', 'resize',
  'rightclick', 'tilesloaded', 'tilt_changed',
  'zoom_changed'
];

function setupListener( map, name ) {
  var eventRow = document.getElementById(name);
  google.maps.event.addListener( map, name, function() {
    eventRow.className = 'event active';
    var timeout = setTimeout( function() {
      eventRow.className = 'event inactive';
    }, 1000 );
  });
}

function initialize() {

  populateTable();
  var mapDiv = document.getElementById( 'google_map_div' );
  var map = new google.maps.Map( mapDiv, {
    center: new google.maps.LatLng( 35.6813529, 139.767343 ),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  for ( var i = 0; i < events.length; i++ ) {
    setupListener( map, events[i] );
  }
}

// Dynamically create the table of events from the defined hashmap
function populateTable() {
  var eventsTable = document.getElementById( 'events' );
  var content = '';
  for ( var i = 0; i < events.length; i++ ) {
    content += '<div class="event" id="' + events[i] + '">' + events[i] +
      '</div>';
  }
  eventsTable.innerHTML = content;
}

// Load the map
google.maps.event.addDomListener( window, 'load', initialize );

</script>

</head>

<body>
    <div id="main">
      <div id="google_map_div">
      </div>
      <div id="events">
      </div>
    </div>
</body>
</html>

Local Search

Calendar

March 2019
S M T W T F S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31  
  • Blogroll

  • Meta