Home/ Questions/Q 7159051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:10:00+00:00

I’m new at this, but I have a Google V3 map that loads from

  • 0

I’m new at this, but I have a Google V3 map that loads from the user’s W3C browser geocode info, and I pull country, state, and city from the geocode object and update input boxes. If the user enters a street address, I want to geocode it via Google and change map.setCenter and setZoom, and display the updated map. When that works, I want to add a marker and infowindow. Despite hours of research and trials, I can’t get the geocode and update to work. The Developer Tool in Chrome seems to indicate that execution ceases/fails at the geocoder.geocode line that is indicated in bold below. Here’s relevant code.

var map, geocoder, marker, infowindow; //global variables

function initializeMap() {
// Try W3C Geolocation to geolocate desktop user
//initialize Google map, geolocate desktop user, and display after page loads
//find country, state, and city for the user's location  -  this all works
}
window.onload = initializeMap;

//change the Google Map after a user enters a street address
$("#streetAddress").blur(function() {
    //if state, city and street address locations are present
if ( $(this).val().length > 0 && $("#state").val().length > 0 && $("#city3").val().length > 0  ) {
    var gAddress =  [$(this).val() + ", " + $("#city3").val() + ", " + $("#state").val()] ;
    //get coordinates of this address
    //if no geocode object exists, create one
    if (!geocoder) {
    geocoder = new google.maps.Geocoder(); //create Geocoder object else use existing one from initializeMap() ?
    }       
    //create a GeocoderRequest object with user's street address
    var geoCoderRequest = {address:  gAddress} 
    //make a Geocoder request
    geocoder.geocode( geoCoderRequest, function(results, status) {  **//this line fails**
    //check if status is OK
            if ( status === google.maps.GeocoderStatus.OK) {
            //update center of existing map on location returned for this address
            map.setCenter(results[0].geometry.location);
            map.setZoom(14);
            }   
    });         
    } else {
            return; //no action if gAddress is incomplete
        }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    According to the documentation, address should be a string, but you’ve created gAddress as an array.

    Try:

    var gAddress =  $(this).val() + ", " + $("#city3").val() + ", " + $("#state").val();

    Update: in response to your wanting to make the zoom happen after the map has initially loaded (e.g in response to user input), here’s a simple example.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var map;
    var start = 1;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function setZoom() {
        map.setZoom(18);
    }

    function setTimedZoom() {
        map.setZoom(start);

        start = start+1;
        if (start > 18) {
            start = 1;  // lets go round again and again; in reality you'd probably stop zooming at this point.
        }

        setTimeout(setTimedZoom, 3000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <a href="javascript:setZoom()">Zoom In</a>
    <a href="javascript:setTimedZoom()">Timed</a>
    <div id="map_canvas"></div>
</body>
</html>
    • 0