JSFiddle - React, Tailwind, and code Playground

by Yamini Sontakke

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="dvMap" style="width: 800px; height: 500px">
</div>

CSS

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

JavaScript

var markers = [
            {
                "title": 'China1',
                "lat": '33.007',
                "lng": '120.504',
                "description": '1.'
            }
        ,
            {
                "title": 'China2',
                "lat": '32.304',
                "lng": '118.549',
                "description": '2'
            }
        ,
            {
                "title": 'China3',
                "lat": '38.161',
                "lng": '117.557',
                "description": '3'
            }
			,
            {
                "title": 'SouthKorea1',
                "lat": '37.55',
                "lng": '126.989',
                "description": '4'
            }
			,
			{
                "title": 'SouthKorea2',
                "lat": '35.91',
                "lng": '127.269',
                "description": '5'
            }
			,
            {
                "title": 'Japan1',
                "lat": '34.17996',
                "lng": '131.5234',
                "description": '6'
            }
		,
            {
                "title": 'Japan3',
                "lat": '35.0058',
                "lng": '132.3381',
                "description": '7'
            }
		,
            {
                "title": 'Japan4',
                "lat": '35.06253',
                "lng": '134.0060087',
                "description": '8'
            }
		,
            {
                "title": 'Japan5',
                "lat": '34.69974',
                "lng": '135.42779',
                "description": '9'
            }
		,
            {
                "title": 'Japan6',
                "lat": '38.270',
                "lng": '140.866',
                "description": '10'
            }
    ];
    

        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new...