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>
<div id="map_canvas" style="width: 600px; height: 400px; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
<b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div>
</div>
<input type='text' id='markerLat' value='' />
<input type='text' id='markerLng' value='' />
<input type="button" onclick="moveMarker()" value="Move Marker">
<div id='info'></div>

JavaScript

//StackOverflow: http://stackoverflow.com/questions/5368928/google-maps-api-v3-turning-user-input-coordinates-to-latlng/5368978#5368978

//test coordinates 51.5001524, -0.1262362
var map;
var zoomLevel;
var marker;

function initialize() {
    var myLatlng = new google.maps.LatLng(40.65, -74);
    var myOptions = {
        zoom: 2,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }


    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    var zoomLevel = map.getZoom();

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        draggable: true
    });

    // Update current position info.
    updateMarkerPosition(myLatlng);

    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(map, 'zoom_changed', function() {
        updateZoomLevel(map.getZoom());
    });

    google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });
};

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
    geocoder.geocode({
        latLng: pos
    }, function(responses) {
        if (responses && responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
        } else {
            updateMarkerAddress('Cannot determine address at this location.');
        }
    });
}

function updateZoomLevel(zoomLevel) {
    document.getElementById('zoomLevel').innerHTML = zoomLevel;

}

function updateMarkerStatus(str) {
    document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(myLatlng) {
   ...