Добавление слоя KML в карту с точками

Question

В настоящее время у меня есть таблица таблицы Fusion, которая синхронизируется с формой Google через скрипт. Это касается местоположений только в Оклахоме, поэтому я заинтересован в добавлении слоя, который покажет границу государства.

Я сделал KML сводную таблицу с этой информацией: https://www.google.com/fusiontables/embedviz?q=select+col2+from+1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn&viz=MAP&h=false&lat=34.766328945783435&lng=-97.20538659179692&t=1&z=7&l=col2&y=2&tmplt=2&hml=KML

И я хотел бы добавить его к моей карте здесь: https://www.google.com/fusiontables/embedviz?q=select+col3%3E%3E0+from+1EPhndJHBm0ghi06Xq9d8P62hUwCisAcQxYxgH5ax&viz=MAP&h=false&lat=36.393799473451324&lng=-94.17718371249998&t=1&z=6&l=col3%3E%3E0&y=2&tmplt=2&hml=ONE_COL_LAT_LNG

Я сделал некоторые исследования и нашел пример карты Чикаго от Google и пытались приспособить его к моей текущей карте

kmllayer = new google.maps.FusionTablesLayer({ 
    query:{ 
     select: "geometry", 
      from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn", 
     }); 

Таким образом, я добавил, что в HTML из моей таблицы Fusion карты, а затем попытался добавить код на свой веб-сайт. Когда я это делаю, я получаю пустой экран. Кроме того, я попытался добавить код на свой сайт без кода KML выше, и он все еще остается пустым. Я пропустил шаг? Мы ценим любые предложения.

Answer 1

Существует синтаксис ошибок в коде, он должен быть

kmllayer = new google.maps.FusionTablesLayer({ 
    query:{ 
     select: "geometry", 
      from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn", 
     }}); 

Рабочий пример с обоими слоями:

 function initialize() { 
 
     var mapOptions = { 
 
      center: new google.maps.LatLng(35, -97), 
 
      zoom: 6 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("map-canvas"), 
 
      mapOptions); 
 
     new google.maps.FusionTablesLayer({ 
 
      query: { 
 
      select: "geometry", 
 
      from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn", 
 
      }, 
 
      map: map, 
 
      options: { 
 
      styleId: 2 
 
      } 
 
     }); 
 
     new google.maps.FusionTablesLayer({ 
 
      query: { 
 
      select: "geometry", 
 
      from: "1EPhndJHBm0ghi06Xq9d8P62hUwCisAcQxYxgH5ax", 
 
      }, 
 
      map: map, 
 
      options: { 
 
      styleId: 2, 
 
      templateId: 2 
 
      } 
 
     }); 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

 html, 
 
     body, 
 
     #map-canvas { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0 
 
     }

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map-canvas"></div>