JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

7/11
-----
input-address-set-marker
-------------------------
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html, body, #map-canvas {
            height: 90%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(14.5833, 120.9667);
            var mapOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            geoCoder = new google.maps.Geocoder;
        }

        function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

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



        /*function clearMarkers() { // clears markers but doesn't remove them from the markers array
            for (var i = 0, l = this.markers.length; i < l; i++) {
                this.markers[i].setMap(null);
            }
        };

        function deleteMarkers() {
           ...