title: Addressing a google map to change setZoom by clicking on an external link
body: <p>I've spent several hours trying to change the zoom level of a google map, using an onClick javascript function. I think my var map is inside the initialize function of the map, that's why it doesn't work, but I'm not sure. Thank you for your precious help.</p>
  
  <p>Here we go:</p>
  
  <p>1) My initialize function (with galeries corresponding to the data retrieved for the markers)</p>
  
  <pre><code>  function initialize() {
        var styles = [
          {
            stylers: [
              { hue: "#486FD5" },
              { saturation: 10 },
              { lightness: 20 },
              { gamma: 1.1 }
            ]
          },{
            featureType: "road",
            elementType: "geometry",
            stylers: [
              { lightness: 40 },
              { visibility: "simplified" }
            ]
          },{
            featureType: "road",
            elementType: "labels",
            stylers: [
              { visibility: "off" }
            ]
          }
        ];
  
        var mapOptions = {
            zoom: 6,
            center: new google.maps.LatLng(46.8,1.7),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false,
            scrollwheel: false,
            styles: styles
        }
  
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        setMarkers(map, galeries);
    }
  
    function setMarkers(map, locations) {
        var image = '/wordpress/wp-content/uploads/logo-25.png';
        for (var i = 0; i &lt; locations.length; i++) {
            var galeries = locations[i];
            var myLatLng = new google.maps.LatLng(galeries[1], galeries[2]);
            var infoWindow = new google.maps.InfoWindow();
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });
            (function(i) {
                google.maps.event.addListener(marker, "click", function() {
                    var galeries = locations[i];
                    infoWindow.close();
                    infoWindow.setContent(
                        "&lt;div id='boxcontent'&gt;&lt;a href='"+galeries[3]+"'&gt;&lt;strong style='color:black'&gt;"+ galeries[0] +"&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;"+ galeries[4] +"&lt;/div&gt;"
                    );
                    infoWindow.open(map, this);
                });
            })(i);
        }
    }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>2) My function called with onClick (all comments corresponding to KO solutions):</p>
  
  <pre><code>function zoom() {
      //map_canvas.setCenter(marker.getPosition()); 
      //map.setZoom(map.getZoom() + 1);
      //map.setZoom('3');
      //$('#map_canvas').gmap({'zoom':2});
      //$('#map_canvas').setZoom(3);
      //google.maps.map.setZoom(2);
      //var carte = google.maps.Map(document.getElementById('map-canvas'));
      //carte.setZoom(2);
      //this.map.setZoom(2);
  }
  </code></pre>
  
  <p>3) Result : nothing happens, and on the console I get :</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'setZoom' of undefined
  </code></pre>