JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var map;
var src = 'http://www.publivende.net/ser/PRECIPITACIONES_ZAFRA_ISA.kmz';

$(function () {   
    initialize();
});

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(12.531174, -87.046827),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: false,
    preserveViewport: true,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
      console.log(content)
    //var testimonial = document.getElementById('capture');
    //testimonial.innerHTML = content;
  });
}