Generic Google Map Example with Markers

by Arsen

HTML

<style>
body {
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
}

h1,
p {
    margin: 0;
    padding: 0;
}

#geocode input {
    height: 2em;
    margin: 2px;
    float: left;
    display: inline-block;
}

#geocode {
    border: #f03 4px dashed;
    background: #cacaca;
    padding: 15px;
}

#out {
    font: monospace;
    height: 300px;
    width: 90%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="geocode">
    <input type="text" value="Мартеновская, 12, Москва" placeholder="For geocode just put smth" id="geocode-inp" />
    <input type="button" value="geocode" id="geocode-btn" />
</div>
<div id="map_div" style="height: 500px;"></div>
<textarea id="out"></textarea>

JavaScript

google.maps.event.addDomListener(window, "load", function() {

    let map = new google.maps.Map(document.getElementById("map_div"), {
            center: new google.maps.LatLng(55.7543997, 37.8094875),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }),
        bounds = new google.maps.LatLngBounds(),
        apiUrl = "http://map-address-api.map.stg.s.o3.ru/api",
        geocodeURL = address => `${apiUrl}/geocode?address=${address}`,
        revGeoURL = point => `${apiUrl}/rev_geocode?LatLong.lat=${point.lat()}&LatLong.long=${point.lng()}`,
        // debugOut generated from http://olado.github.io/doT/index.html
        debugOut = function anonymous(arr1) {
            var out = '';
            if (arr1) {
                var ar, i1 = -1,
                    l1 = arr1.length - 1;
                while (i1 < l1) {
                    ar = arr1[i1 += 1];
                    if (ar.distance) {
                        out += 'Distance:\t' + (Math.round(ar.distance *
                            100) / 100) + 'm\n';
                    }
                    out += 'Formatted:\t' + (ar.address.formatted);
                    if (ar.address.point) {
                        out += '\nPoint:\t\t' + (ar.address.point.lat) + ', ' + (ar.address.point.long);
                    }

                    out += '\n=========\n';
                }
            }
            return out;
        },
        geocodeDiv = document.getElementById('geocode'),
        input = document.getElementById('geocode-inp'),
        btn = document.getElementById('geocode-btn'),
        debugForGoogle = function anonymous(it) {
            var out = '';
            var arr1 = it;
            if (arr1) {
                var address, i1 = -1,
                    l1 = arr1.length - 1;
                while (i1 < l1) {
                    address = arr1[i1 += 1];
                    out += '\nFormatted:\t' + (address.formatted_address) + '\nPoint:\t\t' +...