gaewiki:sidebar

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>