How to Clear Markers in Google Maps API3

Question

i want to make web application using Google Maps API V3 , I have a map that can display markers from database, in case i want to classifying the markers using dropdown menu, but when I move from option '1' to option '2', the markers from option '1' still show, So I want to clear the markers from option '1' and replace with marker with option '2'. Here is my Code !!

<div class="container">
    <div class="well">  
    <div id="map-canvas" style="width:700px;height:400px;"></div> 
</div>

<select id = "kategori" onchange="dropdownChanged();">
   <option value ="1">Marker 1</option>
   <option value ="2">Marker 2</option>
   <option value ="3">Marker 3</option>
</select>


</div>
<script>
       //Sample code written by August Li
       var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
       new google.maps.Point(16, 32));
       var center = null;
       var map = null;
       var currentPopup;
       var bounds = new google.maps.LatLngBounds();

    function addMarker(lat, lng, info) {
        var pt = new google.maps.LatLng(lat, lng);
        bounds.extend(pt);
        var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
        });
        var popup = new google.maps.InfoWindow({
        content: info,
        maxWidth: 300
        });
        google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
        currentPopup.close();
        currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
        });
        google.maps.event.addListener(popup, "closeclick", function() {
        map.panTo(center);
        currentPopup = null;
        });
    }

   function initMap() {
       map = new google.maps.Map(document.getElementById("map-canvas"), {
       center: new google.maps.LatLng(0, 0),
       zoom: 14,

       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false,
       mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
       },
       navigationControl: true,
       navigationControlOptions: {
       style: google.maps.NavigationControlStyle.SMALL
       }
       });


       center = bounds.getCenter();
       map.fitBounds(bounds);

   }

    function dropdownChanged()
    {
        var index = document.getElementById("kategori").value;
        if (index == 1) {
          <?php 
           $keterangan = $this->mdestinasi->getby_kategori(1);            
            foreach($keterangan->result() as $row){
           $nama=$row->nama_destinasi;
           $lat=$row->lat;
           $long=$row->long; 
           echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
           }        
            ?>


        } else if (index == 2 ){

        <?php 
        $keterangan = $this->mdestinasi->getby_kategori(2);            
        foreach($keterangan->result() as $row){
        $nama=$row->nama_destinasi;
        $lat=$row->lat;
        $long=$row->long; 
        echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
        }        
        ?>

        } else {
         <?php 
         $keterangan = $this->mdestinasi->getby_kategori(2);            
         foreach($keterangan->result() as $row){
          $nama=$row->nama_destinasi;
         $lat=$row->lat;
         $long=$row->long; 
         echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
         }        
         ?>
        }

    }
 </script>

How to fix my problem, how can i replace/ clear markers when i select each options in the dropdown. I hope you can fix it, iam sorry for my english. Thanks..

Answer 1

Remove a marker from the map by calling marker.setMap(null) .

This will reset the map property of the marker to null removing it from any map.

In this case you should keep track of the markers so you can remove them later:

<div class="container">
    <div class="well">  
    <div id="map-canvas" style="width:700px;height:400px;"></div> 
</div>

<select id = "kategori" onchange="dropdownChanged();">
   <option value ="1">Marker 1</option>
   <option value ="2">Marker 2</option>
   <option value ="3">Marker 3</option>
</select>


</div>
<script>
       //Sample code written by August Li
       var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
       new google.maps.Point(16, 32));
       var center = null;
       var map = null;
       var currentPopup;
       var bounds = new google.maps.LatLngBounds();

       // to store markers
       var markerList = [];

    function addMarker(lat, lng, info) {
        var pt = new google.maps.LatLng(lat, lng);
        bounds.extend(pt);
        var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
        });

        // store marker in list
        markerList.push(marker);

        var popup = new google.maps.InfoWindow({
        content: info,
        maxWidth: 300
        });
        google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
        currentPopup.close();
        currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
        });
        google.maps.event.addListener(popup, "closeclick", function() {
        map.panTo(center);
        currentPopup = null;
        });
    }

   function initMap() {
       map = new google.maps.Map(document.getElementById("map-canvas"), {
       center: new google.maps.LatLng(0, 0),
       zoom: 14,

       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false,
       mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
       },
       navigationControl: true,
       navigationControlOptions: {
       style: google.maps.NavigationControlStyle.SMALL
       }
       });


       center = bounds.getCenter();
       map.fitBounds(bounds);

   }

    function dropdownChanged()
    {
        // clears all markers before adding new one
        for (var i = 0; i < markerList.length; i++) {
          markerList[i].setMap(null);
        };
        // clears marker list
        markerList = [];

        var index = document.getElementById("kategori").value;
        if (index == 1) {
          <?php 
           $keterangan = $this->mdestinasi->getby_kategori(1);            
            foreach($keterangan->result() as $row){
           $nama=$row->nama_destinasi;
           $lat=$row->lat;
           $long=$row->long; 
           echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
           }        
            ?>


        } else if (index == 2 ){

        <?php 
        $keterangan = $this->mdestinasi->getby_kategori(2);            
        foreach($keterangan->result() as $row){
        $nama=$row->nama_destinasi;
        $lat=$row->lat;
        $long=$row->long; 
        echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
        }        
        ?>

        } else {
         <?php 
         $keterangan = $this->mdestinasi->getby_kategori(2);            
         foreach($keterangan->result() as $row){
          $nama=$row->nama_destinasi;
         $lat=$row->lat;
         $long=$row->long; 
         echo ("addMarker($lat, $long,'<b>$nama</b><br>');\n");
         }        
         ?>
        }

    }
 </script>