Адресация карты google для изменения setZoom, нажав на внешнюю ссылку

Question

Я провел несколько часов, пытаясь изменить уровень масштабирования карты google, используя функцию javascript onClick. Я думаю, что моя карта var находится внутри функции инициализации карты, поэтому она не работает, но я не уверен. Спасибо за вашу драгоценную помощь.

Здесь мы идем:

1) Моя функция инициализации (с Galeries соответствующих данных, полученных для маркеров)

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 < 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(
         "<div id='boxcontent'><a href='"+galeries[3]+"'><strong style='color:black'>"+ galeries[0] +"</strong></a><br />"+ galeries[4] +"</div>" 
       ); 
        infoWindow.open(map, this); 
       }); 
      })(i); 
     } 
    } 

google.maps.event.addDomListener(window, 'load', initialize); 

2) Моя функция вызывается с OnClick (все комментарии, соответствующие решения KO):

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); 
} 

3) Результат: ничего не происходит, и на консоли я получаю:

Uncaught TypeError: Cannot read property 'setZoom' of undefined 

Answer 1

Если вы делаете переменную global map, вы можете получить к ней доступ в обработчиках событий HTML-click.

function zoom() { 
    map.setZoom(map.getZoom() + 1); 
} 

var map; // make global map variable 

function initialize() { 
    ... 
    // initialize the global variable, remove the "var" keyword here 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    setMarkers(map, galeries); 
} 

working fiddle

работает фрагмент кода:

function zoom() { 
 
    map.setZoom(map.getZoom() + 1); 
 
} 
 

 
var map; 
 

 
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 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 

 
    var galeries = [ 
 
     ['Bondi Beach', -33.890542, 151.274856, 4], 
 
     ['Coogee Beach', -33.923036, 151.259052, 5], 
 
     ['Cronulla Beach', -34.028249, 151.157507, 3], 
 
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
 
     ['Maroubra Beach', -33.950198, 151.259302, 1] 
 
    ]; 
 
    setMarkers(map, galeries); 
 
} 
 

 
function setMarkers(map, locations) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png'; 
 
    for (var i = 0; i < locations.length; i++) { 
 
     var galeries = locations[i]; 
 
     var myLatLng = new google.maps.LatLng(galeries[1], galeries[2]); 
 
     bounds.extend(myLatLng); 
 
     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(
 
        "<div id='boxcontent'><a href='" + galeries[3] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + galeries[4] + "</div>"); 
 
       infoWindow.open(map, this); 
 
      }); 
 
     })(i); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div> 
 
<input type="button" value="zoom" onclick="zoom()" />