Maps API v3 Geocode on press Enter

http://stackoverflow.com/questions/10891490

by upsidown

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<div id="map-canvas"></div>
<input type="text" id="address" />
<input type="button" value="Search" id="search">

CSS

#map-canvas {
    height: 400px;
}

JavaScript

var geocoder;
var map;

function initialize() {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 5,
        center: new google.maps.LatLng(10, 10)
    });

    geocoder = new google.maps.Geocoder();
    
    // Set focus to address field
    document.getElementById('address').focus();

    // Bind click event listener for search button
    document.getElementById("search").addEventListener('click', codeAddress, false);

    // Bind key-up event listener for address field
    document.getElementById("address").addEventListener('keyup', function (event) {

        // Check the event key code
        if (event.keyCode == 13) {

            // Key code 13 == Enter key was pressed (and released)
            codeAddress();
        }
    });
}

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);
        }
    });
}

document.body.onload = initialize();