Question

I’m developing a web page with a Google Maps application and I’m having a little trouble with something. As it stands, the web page has a functional map (without any layers) and a search bar. I’m new to programming so hopefully there is a quick fix that I’m missing.
When I search an address, there is a placemark that is placed on the map. However, the map doesn’t zoom into the placemark. How can I make the map zoom in for each searched address?

  <script type="text/javascript">
    var geocoder;
    var map; 
  function initialize() {
    geocoder = new google.maps.Geocoder ();
    var latlng = new google.maps.LatLng (55.1667, -114.4000);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
     map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        }
    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);
                }
    }); 
                            }
</script>

Thank you

Answer 1

I would call two functions:

(1) center the map on the marker

Either you already have the LatLng, or obtain it from marker.getPosition(), with it call map.setCenter(myLatLng).

(2) Set the zoom of the map

map.setZoom(zoomLevel), could be fixed around 12 to 16, or variable depending what kind of marker it is (street address or city overview?) This information can be stored in the marker variable, marker.zoomLevel.

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 });
      map.setZoom(16);
    } 
    else { 
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}