JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div style="width:100%; height:100%;">
    <div id="dvMap"></div>
</div>

CSS

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

JavaScript

var markers = [{
    "title": 'xxxxx School',
        "lat": '53.004758',
        "lng": '-2.241232',
        "description": '<br/><a href="http://www.google.com">View more info</a>',
        "type": 'UK Independent School'
}, {
    "title": 'xxxxx Prep',
        "lat": '51.470123',
        "lng": '-0.209838',
        "description": '<br/><a href="http://www.google.com">View more info</a>',
        "type": 'UK Independent School'
}, {
    "title": 'xxxxxx',
        "lat": '46.709741',
        "lng": '9.159625',
        "description": '<br/><a href="http://www.google.com">View more info</a>',
        "type": 'Swiss Boarding School'
}, {
    "title": 'xxxxxxx independent College',
        "lat": '51.512103',
        "lng": '-0.308055',
        "description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
        "type": 'UK Independent School'
}, {
    "title": 'xxxxxxx Hill',
        "lat": '51.007720',
        "lng": '0.217913',
        "description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',
        "type": 'UK Independent School'
}];

var map;

function initMap() {

    var mapOptions = {
        center: new google.maps.LatLng(51.507351, -0.127758),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            "featureType": "landscape",
                "stylers": [{
                "saturation": -100
            }, {
                "lightness": 65
            }, {
                "visibility": "on"
            }]
        }, {
            "featureType": "poi",
                "stylers": [{
                "saturation": -100
            }, {
                "lightness": 51
            }, {
                "visibility": "simplified"
            }]
        }, {
            "featureType": "road.highway",
                "stylers": [{
                "saturation":...