JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div class="overlay"></div>	
	<div class="overlayMap">
		<div id="map"></div>
	</div>

CSS

#map{
    width:100%;
    height:100%;
}

html,body {
    height:100%;
}

.overlay {
	position: absolute;
	float: left;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 50000000;
	background: #1f1f1f;
}

.overlayMap {
	position: absolute;
	float: left;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 60000000;
	background: #1f1f1f;
}

JavaScript

$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', init);
var map;
    init();
    });
function init() {
    var mapOptions = {
        center: new google.maps.LatLng(51.508800670335646,-0.06943131238223),
        zoom: 12,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        },
        scaleControl: true,
        scrollwheel: true,
        streetViewControl: true,
        draggable : true,
        mapTypeControl: false,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
	{
		featureType: 'water',
		stylers: [{color:'#46bcec'},{visibility:'on'}]
	},{
		featureType: 'landscape',
		stylers: [{color:'#f2f2f2'}]
	},{
		featureType: 'road',
		stylers: [{saturation: -100},{lightness: 45}]
	},{
		featureType: 'road.highway',
		stylers: [{visibility: 'simplified'}]
	},{
		featureType: 'road.arterial',
		elementType: 'labels.icon',
		stylers: [{visibility: 'off'}]
	},{
		featureType: 'administrative',
		elementType: 'labels.text.fill',
		stylers: [{color: '#444444'}]
	},{
		featureType: 'transit',
		stylers: [{visibility: 'off'}]
	},{
		featureType: 'poi',
		stylers: [{visibility: 'off'}]
	}
],
    
    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [
        
    ];

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            icon: '<?php echo $image_attributesabtMAP[0]; ?>',
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}