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

Question

Я вроде новичок в JS и google map, но я пытаюсь создать карту Styled с моими собственными фрагментами, и я хочу добавить некоторые маркеры в зависимости от на уровне масштабирования, потому что когда моя карта находится в minZoom (0), маркеры повторяются горизонтально. Поэтому я ищу способ отключить горизонтальное повторение маркеров или способ переключения маркеров в зависимости от уровня масштабирования.

var ItalieTypeOptions = { 
    getTileUrl: function (coord, zoom) { 
     var normalizedCoord = getNormalizedCoord(coord, zoom); 
     if (!normalizedCoord) { 
      return null; 
     } 
     var bound = Math.pow(2, zoom); 
     return 'http://mysite.fr/folder' + '/' + zoom + '/' + normalizedCoord.x + '/' + (bound - normalizedCoord.y - 1) + '.png'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    maxZoom: 4, 
    minZoom: 0, 
    name: 'Italie' 
}; 
var ItalieMapType = new google.maps.ImageMapType(ItalieTypeOptions); 

function initialize() { 
    var myLatlng = new google.maps.LatLng(0, 0); 
    var mapOptions = { 
     center: myLatlng, 
     zoom: 0, 
     draggable: true, 
     zoomControl: true, 
     scaleControl: false, 
     mapTypeControl: false, 
     streetViewControl: false, 
     backgroundColor: '#6AAECB', 
     mapTypeControlOptions: { 
      mapTypeIds: ['Italie'] 


     } 


    }; 




    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    map.mapTypes.set('Italie', ItalieMapType); 
    map.setMapTypeId('Italie'); 
    var locations = [ 
     ['Lorem', 20, -30], 
     ['Ipsum', 20, 75], 
     ['Dolor', 53, 45] 
    ]; 
    var infowindow = new google.maps.InfoWindow(); 
    var image = { 
     url: 'img/marker.png', 
     size: new google.maps.Size(33, 41), 
     origin: new google.maps.Point(0, 0), 

    }; 




    for (i = 0; i < locations.length; i++) { 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      draggable: false, 
      icon: image, 

      animation: google.maps.Animation.DROP 
     }); 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
} 



function getNormalizedCoord(coord, zoom) { 
    var y = coord.y; 
    var x = coord.x; 

    var tileRange = 25 << zoom; // I wrote 25 to display only one image but i'm not ure if it's the right way 

    if (y < 0 || y >= tileRange) { 
     return null; 
    } 

    if (x < 0 || x >= tileRange) { 
     x = (x % tileRange + tileRange) % tileRange; 
    } 
    return { 
     x: x, 
     y: y 
    }; 

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

Благодаря

EDIT

Таким образом, мне удалось отобразить один маркер в зависимости от уровня масштабирования с этим:

google.maps.event.addListener(map, 'zoom_changed', function() { 

    var currentZoom = map.getZoom(); 

    if (currentZoom >= 3 && currentZoom <= 4) { 
     marker.setMap(map); 
     alert('lol'); 
    } else if (currentZoom == 0) { 
     marker.setMap(null); 
    } else if (currentZoom == 1) { 
     marker.setMap(null); 
    } else if (currentZoom == 2) { 
     marker.setMap(null); 
    } else if (currentZoom == 4) { 
     marker.setMap(null); 
    } else { 
     marker.setMap(null); 
    } 
    }); 

Я знаю, что это не чистый на всех , но если кто-то может мне помочь. Проблема в том, что он только diplay один маркер (последний -> Местоположение ['Dolor', 53, 45]), и я хочу найти способ сказать «отобразить все маркеры в каталоге var)

Благодаря

Answer 1

Создать массив для ваших маркеров, говорят:

var allMarkers = []; 

Затем, когда вы создаете свои маркеры, вы можете нажать их в массив и просто запустить через массив в setMap (карта), как так:

allMarkers.push(marker); 
//when you are ready to display them do the loop 
for(var i = 0; i <= allMarkers.length-1; i++){ 
    allMarkers[i].setMap(map); 
}