概要
対象物レイヤをユーザーの click
イベントに応答させ、クリックされた境界線のプレイス ID、表示名、対象物タイプを取得できます。次のサンプル地図は、行政区域レベル 2 の境界線を示しています。クリックすると、そのポリゴンのスタイルを設定するイベント ハンドラと、イベントデータを含む情報ウィンドウを表示します。
対象物レイヤのイベントを有効にする
対象物レイヤ上のイベントを有効にする手順は次のとおりです。
addListener()
を呼び出し、イベントのタイプ(click
)とイベント ハンドラ関数の名前を渡すことで、アクティビティ通知用の対象物レイヤを登録します。TypeScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listener for the feature layer. featureLayer.addListener('click', handlePlaceClick);
JavaScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listener for the feature layer. featureLayer.addListener("click", handlePlaceClick);
対象物にイベントに応答させるには、0.1 以上の
fillOpacity
の塗りつぶしスタイルを適用します。表示されている対象物のみがクリック可能です。TypeScript
// Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1 // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked: google.maps.FeatureStyleOptions = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5 };
JavaScript
// Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, };
イベントを処理するコードを追加します。この例では、イベント ハンドラにより、選択したポリゴンのスタイルが設定され、情報ウィンドウが表示されます。
TypeScript
// Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + '<br/> Place ID: ' + feature.placeId + '<br/> Feature type: ' + feature.featureType + '</span>'; updateInfoWindow(content, event.latLng); }
JavaScript
// Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + "<br/> Place ID: " + feature.placeId + "<br/> Feature type: " + feature.featureType + "</span>"; updateInfoWindow(content, event.latLng); }
コードサンプルの全文
TypeScript
let map: google.maps.Map; let featureLayer; let infoWindow: google.maps.InfoWindow; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 39.23, lng: -105.73 }, // Park County, CO zoom: 8, // In the cloud console, configure this Map ID with a style that enables the // "Administrative Area Level 2" Data Driven Styling type. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listener for the feature layer. featureLayer.addListener('click', handlePlaceClick); infoWindow = new google.maps.InfoWindow({}); // Apply style on load, to enable clicking. applyStyleToSelected(); } // Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + '<br/> Place ID: ' + feature.placeId + '<br/> Feature type: ' + feature.featureType + '</span>'; updateInfoWindow(content, event.latLng); } // Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1 // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked: google.maps.FeatureStyleOptions = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply styles to the map. function applyStyleToSelected(placeid?) { // Apply styles to the feature layer. featureLayer.style = (options) => { // Style fill and stroke for a polygon. if (placeid && options.feature.placeId == placeid) { return styleClicked; } // Style only the stroke for the entire feature type. return styleDefault; }; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; let featureLayer; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 39.23, lng: -105.73 }, zoom: 8, // In the cloud console, configure this Map ID with a style that enables the // "Administrative Area Level 2" Data Driven Styling type. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listener for the feature layer. featureLayer.addListener("click", handlePlaceClick); infoWindow = new google.maps.InfoWindow({}); // Apply style on load, to enable clicking. applyStyleToSelected(); } // Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + "<br/> Place ID: " + feature.placeId + "<br/> Feature type: " + feature.featureType + "</span>"; updateInfoWindow(content, event.latLng); } // Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply styles to the map. function applyStyleToSelected(placeid) { // Apply styles to the feature layer. featureLayer.style = (options) => { // Style fill and stroke for a polygon. if (placeid && options.feature.placeId == placeid) { return styleClicked; } // Style only the stroke for the entire feature type. return styleDefault; }; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Handle Region Boundary Click Event</title> <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=beta" defer ></script> </body> </html>
サンプルを試す
詳しくは、イベントの説明をご覧ください。