wiesson · June 3, 2016 15:52
diff --git a/maps.html b/maps.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

        .settings {
            position: fixed;
            top: 10px;
            right: 10px
        }
    </style>
 </head>
 <body>
 <div id="map"></div>

 <div class="settings">
    <label><input class="address-snap" type="checkbox"></label>
    <input class="address" type="text" placeholder="Enter a address">
    <input class="lat" type="number" placeholder="Lat">
    <input class="lng" type="number" placeholder="Lng">
 </div>


 <script>

    var marker;
    var map;
    var inputLat = document.querySelector('.lat');
    var inputLng = document.querySelector('.lng');
    var inputAddress = document.querySelector('.address');
    var _timeout;
    var infoWindow;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: {lat: 59.325, lng: 18.070}
        });

        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: {lat: 59.327, lng: 18.067}
        });

        marker.addListener('mouseup', function () {
            geoCode({latLng: marker.getPosition()})
        });

        inputAddress.addEventListener('keyup', addressListener);
    }

    var addressListener = function () {
        clearTimeout(_timeout);

        _timeout = setTimeout(function () {
            var location = inputAddress.value;
            if (location.length > 3)
                geoCode({address: location});
        }, 800);
    };

    function geoCode(search) {
        new google.maps.Geocoder().geocode(search, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var location;

                    if (search.latLng && !document.querySelector('.address-snap').checked) {
                        location = search.latLng;
                    } else {
                        location = results[0].geometry.location;
                        map.setCenter(location);
                    }

                    marker.setPosition(location);

                    inputLat.value = location.lat();
                    inputLng.value = location.lng();

                    inputAddress.value = results[0].formatted_address;
                }
            }
        });
    }
 </script>
 <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Marker Animations</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#map {
	height: 100%;
	}

	.settings {
	position: fixed;
	top: 10px;
	right: 10px
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<div class="settings">
	<label><input class="address-snap" type="checkbox"></label>
	<input class="address" type="text" placeholder="Enter a address">
	<input class="lat" type="number" placeholder="Lat">
	<input class="lng" type="number" placeholder="Lng">
	</div>


	<script>

	var marker;
	var map;
	var inputLat = document.querySelector('.lat');
	var inputLng = document.querySelector('.lng');
	var inputAddress = document.querySelector('.address');
	var _timeout;
	var infoWindow;

	function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	zoom: 13,
	center: {lat: 59.325, lng: 18.070}
	});

	marker = new google.maps.Marker({
	map: map,
	draggable: true,
	animation: google.maps.Animation.DROP,
	position: {lat: 59.327, lng: 18.067}
	});

	marker.addListener('mouseup', function () {
	geoCode({latLng: marker.getPosition()})
	});

	inputAddress.addEventListener('keyup', addressListener);
	}

	var addressListener = function () {
	clearTimeout(_timeout);

	_timeout = setTimeout(function () {
	var location = inputAddress.value;
	if (location.length > 3)
	geoCode({address: location});
	}, 800);
	};

	function geoCode(search) {
	new google.maps.Geocoder().geocode(search, function (results, status) {
	if (status === google.maps.GeocoderStatus.OK) {
	if (results[0]) {
	var location;

	if (search.latLng && !document.querySelector('.address-snap').checked) {
	location = search.latLng;
	} else {
	location = results[0].geometry.location;
	map.setCenter(location);
	}

	marker.setPosition(location);

	inputLat.value = location.lat();
	inputLng.value = location.lng();

	inputAddress.value = results[0].formatted_address;
	}
	}
	});
	}
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
	</script>
	</body>
	</html>