sample »
<script src="https://maps.googleapis.com/maps/api/js"></script> <script> var map, infoWindow; function showFeatures() { var s = document.createElement('script'); var servicePoint = document.getElementById('service_point').value; // 表示されてるフューチャーがあれば消す map.data.forEach(function(f) { map.data.remove(f); }); // バルーンが開いていれば閉じる if (infoWindow) { infoWindow.close(); } // JsonPのコールバックを登録する window.myCallbackFn = function(res) { if (res.Success) { // 成功ならば地図に表示する map.data.addGeoJson(res.Data); } else { // 失敗ならメッセージを出して終了 alert(res.Error); } }; // scriptタグの埋め込み s.setAttribute('src', 'https://itdemo-dot-shizu-road-dev.appspot.com/table/' + servicePoint + '?token=admin&jsonp=true&callback=myCallbackFn'); document.body.appendChild(s); } function onFeatureClicked(ev) { var f = ev.feature; var properties = []; f.forEachProperty(function(v, k) { properties.push('<b>' + k + '</b>: ' + v); }); // バルーンが開いていれば閉じる if (infoWindow) { infoWindow.close(); } // バルーンの作成と表示 infoWindow = new google.maps.InfoWindow({ content: properties.join('<br>'), position: ev.latLng, pixelOffset: new google.maps.Size(0, f.getGeometry().getType() === 'Point'? -32: 0) }); infoWindow.open(map); } document.addEventListener('DOMContentLoaded', function() { // 地図を生成する map = new google.maps.Map(document.getElementById('map_canvas'), { center: {lat: 35.5, lng: 138}, zoom: 8 }); // 地図上でフューチャーがクリックされたときの処理を登録する google.maps.event.addListener(map.data, 'click', onFeatureClicked); }); </script> <div id="map_canvas" style="width: 640px; height: 480px;"></div> サービスポイント: <select id="service_point"> <option value="mainRoad">mainRoad</option> <option value="f1">f1</option> <option value="f2">f2</option> <option value="roadRegulation">roadRegulation</option> </select> <button type="button" onclick="showFeatures();">表示</button>