Изменение уровня масштабирования карты Google с пользовательским вводом

Question

Я пытаюсь изменить уровень масштабирования моей карты Google на основе пользовательского ввода.

<script type="text/javascript">

    var map;

    function initMap() {    
    var uluru = {lat: 37.7749, lng: -122.4194};    
    var map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 10,    

       // standard google map javascript

    } //end of initMap() 


    $('#id_zoomlevel').on('change', function() {
       var zoomlevel = $('#id_zoomlevel :selected').attr('value');
       map.setZoom(zoomlevel);
    });

</script>

Я получаю следующую ошибку:

(index):679 Uncaught TypeError: Cannot read property 'setZoom' of undefined

Как мнепередать теперь установленную переменную карты в функцию 'on change'?

Answer 1

Ваша проблема в том, что map является локальной переменной для вашего метода initMap и глобальной переменной. Когда вы делаете var map внутри вашего initMap метода, вы вместо этого создаете новую переменную map, которая принадлежит вашему методу initMap, а не изменяете внешнюю глобальную переменную map. Таким образом, это похоже на это:

var b;
function a() {
  var b = "foo"; // creates a new `b` variable within `a` (and thus nott modifying the outer `b` variable)
}
a();
console.log(b); // cannot access `b` outside of `a` (similar to `initMap`)

но если вы удалите var из своего внутреннего метода, вы вместо этого измените глобальную переменную (а не создадите новую локальную переменную):

var b;
function a() {
  b = "foo";
}
a();
console.log(b); // cannot access `b` outside of `a` (similar to `initMap`)

Таким образом, ваш код должен выглядеть примерно так:

<script type="text/javascript">

    var map; // declare as global

    function initMap() {    
    var uluru = {lat: 37.7749, lng: -122.4194}; 
    //\/ --- initialize the global `map` variable (don't create a new local map variable)   
    map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 10,    

       // standard google map javascript

    } //end of initMap() 


    $('#id_zoomlevel').on('change', function() {
       var zoomlevel = $('#id\_zoomlevel :selected').attr('value');
       map.setZoom(zoomlevel);
    });

</script>

Answer 2

Вы объявляете новую map переменную в initMap() функции

<script type="text/javascript">

    var map;

    function initMap() {    
    var uluru = {lat: 37.7749, lng: -122.4194};    
    map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 10,    
    . . . . . . standard google map javascript .....


    $('#id_zoomlevel').on('change', function() {
       var zoomlevel = $('#id\_zoomlevel :selected').attr('value');
       map.setZoom(zoomlevel);
    });

</script>

использовать глобальную переменную карты вместо локальной