addeeandra · April 13, 2020 14:14
diff --git a/covid19map.html b/covid19map.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Covid19 Cases in Countries</title>
 </head>
 <body style="padding: 0; margin: 0;">

 <!-- Peta -->
 <div id="googleMap" style="width:100%;height:100%;position: absolute"></div>

 <!-- Jquery -->
 <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        crossorigin="anonymous"></script>

 <!-- Google Map-->
 <script async defer
        src="http://maps.googleapis.com/maps/api/js?key={{MASUKKAN GOOGLE API KEY ANDA DI SINI}}&callback=initMap"></script>

 <!-- Scripts -->
 <script>
    let covidApiHost = 'https://api.covid19api.com';
    let mapInstance = null;

    function initMap() {
        let mapConfig = {
            center: new google.maps.LatLng(-7.2871143471359465, 112.76046703669502),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        mapInstance = new google.maps.Map(document.getElementById("googleMap"), mapConfig);

        fetchData()
    }

    function fetchData() {
        fetchCountries()
            .then(function (countries) {
                fetchStats(countries);
            })
    }

    function fetchCountries() {
        return $.get(covidApiHost + '/countries')
    }

    function fetchStats(countries) {
        $(countries).each(function (index, country) {
            $.get(covidApiHost + '/country/' + country.Slug)
                .then(function (stats) {
                    handleStats(stats)
                })
        })
    }

    function handleStats(statuses) {
        if (statuses.length <= 0) return;
        let status = statuses[statuses.length - 1]; // ambil status terakhir
        setMarker(status)
    }

    function setMarker(status) {
        let countryName = status.Country;
        let latitude = status.Lat;
        let longitude = status.Lon;
        let statusConfirmed = status.Confirmed;
        let statusRecovered = status.Recovered;
        let statusDeath = status.Deaths;

        let contentString = `
            <h2>${countryName}</h2>
            <table>
                <tr>
                    <td>Terjangkit</td>
                    <td> : </td>
                    <td>${statusConfirmed}</td>
                </tr>
                <tr>
                    <td>Sembuh</td>
                    <td> : </td>
                    <td>${statusRecovered}</td>
                </tr>
                <tr>
                    <td>Meninggal</td>
                    <td> : </td>
                    <td>${statusDeath}</td>
                </tr>
            </table>
        `;

        let infoWindow = new google.maps.InfoWindow({
            content: contentString
        });

        let marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: mapInstance,
            title: countryName,
            icon: 'https://covid19.kanalitika.com/coronavirus.png'
        });
        marker.addListener('click', function () {
            infoWindow.open(mapInstance, marker);
        })
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Covid19 Cases in Countries</title>
	</head>
	<body style="padding: 0; margin: 0;">

	<!-- Peta -->
	<div id="googleMap" style="width:100%;height:100%;position: absolute"></div>

	<!-- Jquery -->
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	crossorigin="anonymous"></script>

	<!-- Google Map-->
	<script async defer
	src="http://maps.googleapis.com/maps/api/js?key={{MASUKKAN GOOGLE API KEY ANDA DI SINI}}&callback=initMap"></script>

	<!-- Scripts -->
	<script>
	let covidApiHost = 'https://api.covid19api.com';
	let mapInstance = null;

	function initMap() {
	let mapConfig = {
	center: new google.maps.LatLng(-7.2871143471359465, 112.76046703669502),
	zoom: 5,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	mapInstance = new google.maps.Map(document.getElementById("googleMap"), mapConfig);

	fetchData()
	}

	function fetchData() {
	fetchCountries()
	.then(function (countries) {
	fetchStats(countries);
	})
	}

	function fetchCountries() {
	return $.get(covidApiHost + '/countries')
	}

	function fetchStats(countries) {
	$(countries).each(function (index, country) {
	$.get(covidApiHost + '/country/' + country.Slug)
	.then(function (stats) {
	handleStats(stats)
	})
	})
	}

	function handleStats(statuses) {
	if (statuses.length <= 0) return;
	let status = statuses[statuses.length - 1]; // ambil status terakhir
	setMarker(status)
	}

	function setMarker(status) {
	let countryName = status.Country;
	let latitude = status.Lat;
	let longitude = status.Lon;
	let statusConfirmed = status.Confirmed;
	let statusRecovered = status.Recovered;
	let statusDeath = status.Deaths;

	let contentString = `
	<h2>${countryName}</h2>
	<table>
	<tr>
	<td>Terjangkit</td>
	<td> : </td>
	<td>${statusConfirmed}</td>
	</tr>
	<tr>
	<td>Sembuh</td>
	<td> : </td>
	<td>${statusRecovered}</td>
	</tr>
	<tr>
	<td>Meninggal</td>
	<td> : </td>
	<td>${statusDeath}</td>
	</tr>
	</table>
	`;

	let infoWindow = new google.maps.InfoWindow({
	content: contentString
	});

	let marker = new google.maps.Marker({
	position: new google.maps.LatLng(latitude, longitude),
	map: mapInstance,
	title: countryName,
	icon: 'https://covid19.kanalitika.com/coronavirus.png'
	});
	marker.addListener('click', function () {
	infoWindow.open(mapInstance, marker);
	})
	}
	</script>
	</body>
	</html>