Google Developers\u306e “Google Maps JavaScript API” \u30da\u30fc\u30b8\u306bGoogle Maps\u3067\u767a\u751f\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u306e\u7a2e\u985e\u3092\u307b\u307c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u753b\u9762\u4e0a\u306b\u8868\u793a\u3055\u305b\u308b\u30b5\u30f3\u30d7\u30eb\u304c\u8f09\u3063\u3066\u3044\u308b\uff0eGoogle Maps\u306e\u6a5f\u80fd\u3092\u30d5\u30eb\u306b\u6d3b\u7528\u3057\u305f\u30ab\u30b9\u30bf\u30e0WEB\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3059\u308b\u969b\u306e\u53c2\u8003\u306b\u3059\u308b\u3068\u826f\u3044\u3060\u308d\u3046\uff0e
\r\n
\r\n\u3000\u3000https:\/\/developers.google.com\/maps\/documentation\/javascript\/events<\/a><\/b>\r\n
\r\n
\r\n
\r\n\u3010\u8131Google Maps\u306b\u3088\u308a\u5b9f\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3011\r\n
\r\n
\r\n
\r\n\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h4>\r\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Google Map Events Explorer<\/title>\r\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\r\n <meta charset=\"utf-8\">\r\n<style>\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n #google_map_div {\r\n height: 100%;\r\n }\r\n .event {\r\n transition: background-color 0.5s ease-out;\r\n padding-bottom: 2px;\r\n }\r\n #google_map_div {\r\n float: left;\r\n width: 500px;\r\n height: 400px;\r\n margin-right: 6px;\r\n }\r\n #events {\r\n padding: 2px;\r\n overflow: hidden;\r\n font-size: 15px;\r\n font-family: 'Droid Sans Mono', monospace;\r\n }\r\n .active {\r\n background-color: #99FFCC;\r\n }\r\n .inactive {\r\n background-color: white;\r\n }\r\n<\/style>\r\n \r\n<script type='text\/javascript' src='https:\/\/maps.google.com\/maps\/api\/js?sensor=false&libraries=geometry&ver=4.4.2'><\/script>\r\n \r\n<script>\r\nvar events = [\r\n 'bounds_changed', 'center_changed', 'click',\r\n 'dblclick', 'drag', 'dragend',\r\n 'dragstart', 'heading_changed', 'idle',\r\n 'maptypeid_changed', 'mousemove', 'mouseout',\r\n 'mouseover', 'projection_changed', 'resize',\r\n 'rightclick', 'tilesloaded', 'tilt_changed',\r\n 'zoom_changed'\r\n];\r\n\r\nfunction setupListener( map, name ) {\r\n var eventRow = document.getElementById(name);\r\n google.maps.event.addListener( map, name, function() {\r\n eventRow.className = 'event active';\r\n var timeout = setTimeout( function() {\r\n eventRow.className = 'event inactive';\r\n }, 1000 );\r\n });\r\n}\r\n\r\nfunction initialize() {\r\n\r\n populateTable();\r\n var mapDiv = document.getElementById( 'google_map_div' );\r\n var map = new google.maps.Map( mapDiv, {\r\n center: new google.maps.LatLng( 35.6813529, 139.767343 ),\r\n zoom: 15,\r\n mapTypeId: google.maps.MapTypeId.ROADMAP\r\n });\r\n \r\n for ( var i = 0; i < events.length; i++ ) {\r\n setupListener( map, events[i] );\r\n }\r\n}\r\n\r\n\/\/ Dynamically create the table of events from the defined hashmap\r\nfunction populateTable() {\r\n var eventsTable = document.getElementById( 'events' );\r\n var content = '';\r\n for ( var i = 0; i < events.length; i++ ) {\r\n content += '<div class=\"event\" id=\"' + events[i] + '\">' + events[i] +\r\n '<\/div>';\r\n }\r\n eventsTable.innerHTML = content;\r\n}\r\n\r\n\/\/ Load the map\r\ngoogle.maps.event.addDomListener( window, 'load', initialize );\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"main\">\r\n <div id=\"google_map_div\">\r\n <\/div>\r\n <div id=\"events\">\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>","protected":false},"excerpt":{"rendered":"Google Developers\u306e “Google Maps JavaScript API” \u30da\u30fc\u30b8\u306bGoogle Maps\u3067\u767a\u751f\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u306e\u7a2e\u985e\u3092\u307b\u307c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u753b\u9762\u4e0a\u306b\u8868\u793a\u3055\u305b\u308b\u30b5\u30f3\u30d7\u30eb\u304c\u8f09\u3063\u3066\u3044\u308b\uff0eGoogle Maps\u306e\u6a5f\u80fd\u3092\u30d5\u30eb\u306b\u6d3b\u7528\u3057\u305f\u30ab\u30b9\u30bf\u30e0WEB\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3059\u308b\u969b\u306e\u53c2\u8003\u306b\u3059\u308b\u3068\u826f\u3044\u3060\u308d\u3046\uff0e","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[561],"tags":[704,703,576],"class_list":["post-4824","post","type-post","status-publish","format-standard","hentry","category-webmap","tag-event-handling","tag-events","tag-google-maps-api"],"_links":{"self":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/4824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/comments?post=4824"}],"version-history":[{"count":2,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/4824\/revisions"}],"predecessor-version":[{"id":9889,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/posts\/4824\/revisions\/9889"}],"wp:attachment":[{"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/media?parent=4824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/categories?post=4824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/y2tech.net\/blog\/wp-json\/wp\/v2\/tags?post=4824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}