Cancellare markers google maps

**luca9** · 13-01-2014, 11:40

Ciao a tutti. Ho creato una mappa con google maps con due array.
Ho creato una funzione per poter cancellare tutti i markers della mappa ma non funziona.
La console web di firefox mi dice che 'this.markers is undefined'.

Dove ho sbagliato?
Se invece di cancellare tutti i markers vorrei cancellare solo un array?

Il codice è questo.

codice:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script type="text/javascript">

function initialize() {
        var latlng = new google.maps.LatLng(52.474, -1.868);

        var myOptions = {
            zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var image = 'icon1.png';
        var image2 = 'icon2.png';
        

        var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4],
            ['ETAP Birmingham Airport', 50.452527, -1.031644, 3],
            ['ibis Birmingham City Centre', 51.475162, -2.897208, 2]
        ];
        var bars = [
            ['ibis Birmingham Airport', 51.452656, -1.730548, 4],
            ['ETAP Birmingham Airport', 53.452527, -1.531644, 3],
            ['ibis Birmingham City Centre', 52.475162, -1.297208, 2]
        ];
        var markersArray = [];
        

       for (var i = 0; i < hotels.length; i++) {
        var hotel = hotels [i]
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng (hotel[1], hotel[2]),
            map: map,
            icon: image,
            title: hotel[0],
            zIndex: hotel[3]
        });
    } 
    
        for (var i = 0; i < bars.length; i++) {
        var bar = bars [i]
                
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng (bar[1], bar[2]),
            map: map,
            icon: image2,
            title: bar[0],
            zIndex: bar[3]            
        });
    }
    
    google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

    
   }

window.onload = initialize;


</script>
</head>

<body>
<input type="button" onclick="google.maps.Map.prototype.clearMarkers()" value="settare null">

        <div id="map" style="width:500px; height:500px"></div>
  

</body>
</html>

**cavicchiandrea** · 13-01-2014, 12:23

Prova a togliere la riga this.markers = new Array(); e ad instaziare array sotto var markersArray = []; var markers = new Array();

**luca9** · 13-01-2014, 15:07

Ho fatto le modifiche ma non funziona.
L'errore è sempre quello.

**BlackThunder** · 13-01-2014, 17:47

codice:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script type="text/javascript">

function initialize() {
        var latlng = new google.maps.LatLng(52.474, -1.868);

        var myOptions = {
            zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var image = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
        var image2 = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        

        var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4],
            ['ETAP Birmingham Airport', 50.452527, -1.031644, 3],
            ['ibis Birmingham City Centre', 51.475162, -2.897208, 2]
        ];
        var bars = [
            ['ibis Birmingham Airport', 51.452656, -1.730548, 4],
            ['ETAP Birmingham Airport', 53.452527, -1.531644, 3],
            ['ibis Birmingham City Centre', 52.475162, -1.297208, 2]
        ];
        var markersArray = [];
        

       for (var i = 0; i < hotels.length; i++) {
        var hotel = hotels [i]
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng (hotel[1], hotel[2]),
            map: map,
            icon: image,
            title: hotel[0],
            zIndex: hotel[3]
        });
        markersArray.push(marker);
    } 
    
        for (var i = 0; i < bars.length; i++) {
        var bar = bars [i]
                
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng (bar[1], bar[2]),
            map: map,
            icon: image2,
            title: bar[0],
            zIndex: bar[3]            
        });
        markersArray.push(marker);
    }
    
    google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < markersArray.length; i++){
       markersArray[i].setMap(null);
    }
    markersArray = new Array();
};

//markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

    
   }

window.onload = initialize;


</script>
</head>

<body>
<input type="button" onclick="google.maps.Map.prototype.clearMarkers()" value="settare null">

        <div id="map" style="width:500px; height:500px"></div>
  

</body>
</html>

Ecco il codice corretto, lascio a te capire l'errore

**luca9** · 13-01-2014, 23:08

Grazie. Funziona.

Se volessi cancellare solo un array di marker?
Ho provato cosi ma non funziona.

----
google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i < bars.length; i++){
bars[i].setMap(null);
}
----

**BlackThunder** · 14-01-2014, 14:00

Devi dichiarare due array, uno che contiene i marker "bar" e l'altro i marker "hotel", infine inserisci due "input button" e gli associ ad ognuno la cancellazione di un array di marker.

Spero di essere stato chiaro.

Discussione: Cancellare markers google maps

Strumenti discussione

Ricerca discussione

Visualizza

Cancellare markers google maps

Tag per questa discussione

Permessi di invio