JSFiddle - React, Tailwind, and code Playground

by Christopher

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div align="center">
    <br>hello
    <br>
    <br>
    <br> <a href="#loginScreen" class="button">Click here to open Google Map</a> </div>
<div id="loginScreen">
    <div id="googlemap"></div>
    <p>I am just a text for demonstration.</p>
    <a href="#" class="cancel">&times;</a> </div>
<div id="cover"> </div>

CSS

.button {
            width: 150px;
            padding: 10px;
            background-color: #FF8C00;
            box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.2);
            font-weight: bold;
            text-decoration: none;
        }

        #cover {
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 5;
            width: 100%;
            height: 100%;
            display: none;
        }

        #loginScreen {
            height: 380px;
            width: 340px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            display: none;
            border: 5px solid #cccccc;
            border-radius: 10px;
            background-color: white;
        }
        #googlemap{
            height: 200px;
            width: 200px;
        }

        #loginScreen:target,
        #loginScreen:target + #cover {
            display: block;
            opacity: 2;
        }

        .cancel {
            display: block;
            position: absolute;
            top: 3px;
            right: 2px;
            background: rgb(245, 245, 245);
            color: black;
            height: 30px;
            width: 35px;
            font-size: 30px;
            text-decoration: none;
            text-align: center;
            font-weight: bold;
        }

JavaScript

var label = 'B';
        var overlayContentString = 'Old house here.';
        var infoWindow = new google.maps.InfoWindow({content: overlayContentString});

        var myLatLng = {lat: 51.7124916, lng:8.435252};

        var map = new google.maps.Map(document.getElementById('googlemap'), {
            zoom: 15,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: {lat:51.7124916, lng:8.435252},
            map: map,
            title: 'My home!',
            animation: google.maps.Animation.DROP
        });

        marker.addListener('click', function() { infoWindow.open(map,marker);});