Question

I’m using simpliest example from the official documentation:

function initialize() {
  var mapCent = new google.maps.LatLng($shirota, $dolgota);
  var myOptions = {
    zoom: $uvelichenie,
    center: mapCent,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};

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

I’ve added this to change map type dynamically as described in the official documentation:

function perekluchitDor() {
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}

This into a href in HTML part:
onclick="perekluchitDor();">


Everything is pretty simple, but still doesn’t work. All that I can see is the error “map is not defined” when I click the link.
I wonder what am I doing wrong here?
												

Answer 1

This is a variable scope issue. You need to declare map outside of your functions, as below (1st line of code).

      var map;  
      function initialize() {
          var mapCent = new google.maps.LatLng($shirota, $dolgota);
          var myOptions = {
            zoom: $uvelichenie,
            center: mapCent,
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };

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