JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="padding-top: 50px; background: red;">
  <button class="toggle_layer1">Toggle Layer [1]</button>
  <button class="toggle_layer2">Toggle Layer [2]</button>

  <br> <br>
  <div id="map"></div>
  <div class="text"></div>
  <br style="clear: both">

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSfbpz7NRERE3oKWT-qMz511PiSSTaEDU&signed_in=true&callback=initMap">
  </script>
</div>

CSS

#map {
  height: 450px;
  width: 490px;
  float: left;
}

.text {
  padding: 5px;
  color: blue;
  font-size: 18px;
  float: right;
  width: 150px;
}

button {
  background: red;
  color: white;
  border-radius: 5px;
  border: 0;
  padding: 5px;
}

JavaScript

var map;
var mapContainer = document.getElementById('map');
var kmlLayers = [];
/*
googleDriveFileIds
0B3PS4oT3UuQ_MlE0UHpRNVVCQlk // thomann
0B3PS4oT3UuQ_VUlmNTV3M3hhYkE // other
0B3PS4oT3UuQ_SWRjQmpRcXVZMUU // test layer
*/

function initMap() {
  map = new google.maps.Map(mapContainer, {
    center: new google.maps.LatLng(49.804382, 10.731529),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  kmlLayers[0] = loadKmlLayer(map, '0B3PS4oT3UuQ_MlE0UHpRNVVCQlk');
  kmlLayers[1] = loadKmlLayer(map, '0B3PS4oT3UuQ_SWRjQmpRcXVZMUU');
}

function loadKmlLayer(map, fileId) {
  var kmllayer = new google.maps.KmlLayer({
    suppressInfoWindows: false,
    preserveViewport: false,
    map: map,
    driveFileId: fileId
  });


  kmllayer.addListener('click', function (kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  return kmllayer;
}

$('.toggle_layer1').click(function () {
  if (typeof kmlLayers[0] === 'undefined') {
    return;
  }

  kmlLayers[0].setMap(kmlLayers[0].getMap() ? null : map);
});

$('.toggle_layer2').click(function () {
  if (typeof kmlLayers[1] === 'undefined') {
    return;
  }

  kmlLayers[1].setMap(kmlLayers[1].getMap() ? null : map);
});

function showInContentWindow(desc) {
  $('.text').html(desc);
}