как мне сделать таблицу и карту интерактивными

Question

, поэтому я являюсь файлом kml со значениями long и lat.Я пытаюсь создать карту и таблицу ниже, используя Google API, мне удалось создать их обоих.Следующий мой шаг - заставить карту и таблицу взаимодействовать друг с другом, например, маркер выбирается, когда я щелкаю по соответствующей строке и наоборот.Я нашел похожий пример здесь: https://developers.google.com/chart/interactive/docs/examples.

Однако способ создания карты и таблицы сильно отличается от того, что я там вижу.Я следую за веб-сайтом API Google, чтобы создать эти элементы.Одна проблема, с которой я столкнулся с этим кодом, состоит в том, что предоставленный код показывает карту, таблицу и диаграмму вместе, и диаграмма была связана с таблицей Google.Я попытался запустить функцию инициализации, но страница становится пустой.

Я пытаюсь использовать приведенный ниже код для запуска своей работы, очевидно меняя имена.:

    var geoView = new google.visualization.DataView(geoData);
    geoView.setColumns([0, 1]);

    var table =
        new google.visualization.Table(document.getElementById('table_div'));
    table.draw(geoData, {showRowNumber: false, width: '100%', height: '100%'});

    var map =
        new google.visualization.Map(document.getElementById('map_div'));
    map.draw(geoView, {showTip: true});

    // Set a 'select' event listener for the table.
    // When the table is selected, we set the selection on the map.
    google.visualization.events.addListener(table, 'select',
        function() {
          map.setSelection(table.getSelection());
        });

    // Set a 'select' event listener for the map.
    // When the map is selected, we set the selection on the table.
    google.visualization.events.addListener(map, 'select',
        function() {
          table.setSelection(map.getSelection());
        });
  }

--> here is my initial setup 
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat:42.3965006 , lng: -83.2464787}
    });
--> here is my points used for markers    
var locations  = [['Name', lat,long],];
--> here is my info window popup
infowindowContent =[
['<div class ="info_content">' +'<h3>name</h3>' + '<p> info I would like to show</p>' + '<p>info I would like to show</p>'+'<p>info I would like to show</p>]];
var infowindow = new google.maps.InfoWindow(), marker,i;
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  }
  );
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(infowindowContent[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
  }
</script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);
--> here is my table
  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Lat');
    data.addColumn('number', 'Long');
    data.addColumn('string', 'ProgramName');
    data.addColumn('string', 'Service Restrictions');
    data.addRows([
      [lat, long, programname, service restriction]
      ]);
    //showing all values on the table on the map
    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
  }


</script>

Я ожидаю чего-то очень похожего на пример, приведенный в Google API.Я попытался использовать google.visualization для моей таблицы и карты, ничего не изменилось.извините, что я не очень хорошо объяснил свой код.Любые отзывы будут оценены.