How to remove markers dynamically with Google Maps API?

Question

I'm writing a program that take in an address, state, or zip code. Queries our database take the results and push them to maps and markers with Google Maps API.

Here is the function to add a marker to the page:

function codeAddress(address) {

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Here is how I'm pushing the addresses to the function:

function get_matches()
       {
           var info_ = document.getElementById('address').value; 
    $.ajax({ url: 'find_store.php',
         data: {info: info_},
         type: 'get',
         success: function(output) {
                         var html = output;
                        $('#dress').html(html);
                               var  num =$('#row_c').html();
                               var counter = 0;
                               while(counter < num)
                               {
                                   var addr = $('.addre#'+ counter).html();
                                   codeAddress(addr);

                                   counter++;
                               }
                                       }
});

} 

Basically with this function according to their input it will return the correct store outputs them into a div and unordered list. I'm passing the number of rows to the inner HTML of a hidden div "#row_c" then I run through a loop which grabs all the addresses from every div outputted to the screen.

Here is an example of how I get the information for when a user inputs the state abbreviation.

else if($type == 2)
      {
          $row_count = 0;
          $z_query = "select * from store_table where state like '%$accept%' and address like '%$accept%' limit 10";
          $result = mysql_query($z_query);
          $num_rows = mysql_num_rows($result);
          if($num_rows == 0)
          {
            echo"<script>alert(\"Your State look-up was unsuccessful, please try again\")</script>";

          }
          $width = ($num_rows * 300)."px";
          if($num_rows > 0)
          {
              echo"<div id = 'state_container' style = \" margin:none; height:200px; backround-color:hsl(0,0%,95%);  position:relative; padding:0px; overflow-x:hidden; overflow-x:scroll; overflow-y:none;\">";
              echo"<ul style = 'list-style-type:none;  margin-top:0px; margin-left:0px; padding-left:0px; width:$width;'>";
              while($row = mysql_fetch_assoc($result))
              {
                  $state = "".$row['state']."";
                  $store = "".$row['store_name']."";
                  $phone = "".$row['phone']."";
                  $addr = "".$row['address']."";
                  $website = "".$row['website']."";
                  $state = preg_replace('/\s+/', '', $state);
                  $phone = preg_replace('/\s+/', '', $phone);
                  $website = preg_replace('/\s+/', '', $website);
                  $state = stripslashes($state);
                  $store = stripslashes($store);
                  $phone = stripslashes($phone);
                  $addr = stripslashes($addr);
                  $website = stripslashes($website);




                  echo"<li style = 'float:left; margin:none; margin-left:5px; margin-right:10px;'>";
                  echo"<br/><b>$store</b>";
                  echo"<br />$phone";
                  echo"<br /><div class = 'addre' id = '$row_count' style = 'margin:0px; padding:0px;'>$addr</div>";
                  echo"<br /><a href='$website' style = 'color:#000000; text-decoration:none;'>$website</a>";
                  echo"</li>";



                 $row_count++; 
              }
              echo"<script>$('#row_c').html($row_count)</script>";
              echo"</ul>";
              echo"</div>";
          }

      } 

How can I delete previous markers? For example if a user goes and searches 'CA' that's great everything works fine and dandy. But if the same user want to search anything else - let's say a specific zip code in California - it does the search but all the previous markers are still there, making their second search pointless.

Answer 1

for (var i = 0, marker; marker = markers[i]; i++) { marker.setMap(null); }

Answer 2

First you need to store all your markers in an array.

var hotSpotMapMarkers = [];

Then as you create your markers, you store them in the array at the same time you assign them to the map.

hotSpotMapMarkers.push(<your marker object>);

Then, the next time you refresh your map, remove all the markers first. Something like this:

// Clear all markers currently on the map
for (var i = 0; i < hotSpotMapMarkers.length; i++)
    hotSpotMapMarkers[i].setMap(null);

This code is from an app I've written that does exactly this. By the way, there are plenty of examples, which can be found by using Google, that shows how to do this.