JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas2" style="border: 2px solid #3872ac;"></div>

CSS

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

JavaScript

var contactLatitude = 9.09325059;
var contactLongitude = 76.49194755;
function initialize() {
    var mapCanvas = document.getElementById('map_canvas2');
    var myLatLng = {
        lat: contactLatitude,
        lng: contactLongitude
    };
    var mapOptions = {
        center: new google.maps.LatLng(contactLatitude, contactLongitude),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    addMarker(myLatLng, map);
}

function addMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        title: 'Home Center',
        map:map
    });
}

google.maps.event.addDomListener(window, 'load', initialize);