JSFiddle - React, Tailwind, and code Playground

by K.J Ye

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=true"></script>
<div id="map_canvas"></div>

CSS

#map_canvas{
    width: 500px;
    height: 500px;
}

JavaScript

var map = null;
var markersArray = [];
//default load position

function initialize() {
    var latlng = new google.maps.LatLng(51.41859298, 0.089179345);

    var settings = {
        zoom: 11,
        center: latlng,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'white'
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), settings);
    google.maps.event.addListener(map, 'click', function(event){alert('Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng())});
}


window.onload = initialize;