Displaying typed address on Google Maps.

by Laurie

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div class="content">
    <p>Digite no campo abaixo o endereço que deseja exibir no mapa:</p>
    <input type="text" id="address" value="Av. Atlântica, 1702 - Copacabana - Rio de Janeiro" onclick="selectText()" />
    <input type="button" value="Enviar" onclick="codeAddress()" />
    <div id="map-canvas"></div>
</div>

CSS

#map-canvas {
  width: 100%;
  max-width: 640px;
  height: 350px;
  border: 1px solid #666;
}

JavaScript

function selectText() {
    document.getElementById('address').select();
}

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    codeAddress();
}

function codeAddress() {
    var address = '231 saint asaphs rd, bala cynwyd, pa';
    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);