JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

CSS

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

JavaScript

var geocoder;
var map;
var infoWindow = new google.maps.InfoWindow();

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListener(map,'click', function() {
        infoWindow.close();
    });
    var xml = xmlParse(xmlData);
    var markers = xml.documentElement.getElementsByTagName("marker");
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var materi = markers[i].getAttribute("materi");
        var pemateri = markers[i].getAttribute("pemateri");
        var tanggal = markers[i].getAttribute("tanggal");
        var hari = markers[i].getAttribute("hari");
        var jam = markers[i].getAttribute("jam");
        var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
        bounds.extend(point);
        var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + materi + " : " + pemateri + "<br/>" + hari + " " + tanggal + " Jam : " + jam;

        var marker = new google.maps.Marker({
            map: map,
            position: point
        });
        bindInfoWindow(marker, map, infoWindow, html);
    }
    map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

// parse text to XML doc
/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM...