Question

I am just getting underway with google maps api (v3) and it looks good, but I am having some difficulty retrieving the map object, after it has been declared/initialized elsewhere.

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(38.90229, -77.021899);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  }

  function Search() {
    alert ("Searching...");
    var map = document.getElementById("map_canvas");
    // Want to do is map.setCenter(...) but I don't know how to retrieve the map object
  }

</script>

See the Search function I’m working on? I want to re-center the map, ultimately. But, generally, I want to retrieve the map object that was created upon initialization.

Thank you.

Answer 1

You should return the map in intialize() (and possibly change the name of the function). The way you have it now, it’s just a local variable inside the initialize() function. So, the last line of the initialize function should be more like

return new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Then when you call initialize, assign the return value to a variable, say called map. Once you have the map object returned into a variable, you can recenter with:

map.setCenter(new google.maps.LatLng(lat, lon)); 

The way you have it now, you’ll probably want to pass map as a parameter to Search().