title: Refresh and Delete Marker on Google Maps
body: <p>I am new to Google Maps functions and i want to know on how to delete markers on Map , Will refreshing the map removes the Marker or do I need to Add something to Remove the markers ??</p>
  
  <p>I am adding marker by using Getjson loop from database. . </p>
  
  <p>Here is my set of codes</p>
  
  <pre><code>var Rad = 0;
  var customerlocationID = 0;
  
  var geocoder, infoBubble, geocode;
  var map;
  var selectedMarker;
  var ID;
  //var mgr;
  $("#ddlRadius").live("change", function () {
      var selectValue = "";
      selectValue = $("#ddlRadius option:selected").val();
  
      if (selectValue == "77") {
          Rad = 5;
          codeAddress(customerlocationID, Rad);
      } else if (selectValue == "78") {
          Rad = 10;
          codeAddress(customerlocationID, Rad);
      } else if (selectValue == "79") {
          Rad = 25;
          codeAddress(customerlocationID, Rad);
      } else if (selectValue == "80") {
          Rad = 50;
          codeAddress(customerlocationID, Rad);
      } else if (selectValue == "81") {
          Rad = 100;
          codeAddress(customerlocationID, Rad);
      }
  });
  
  
  function initialize() {
      var minZoomLevel = 4;
      var zooms = 7;
      geocoder = new google.maps.Geocoder();
      geocode = new google.maps.Geocoder();
  
      // Used to Set the Center of the Maps on the Logged User
      $.getJSON('/Dashboard/LoadAddress', function Geocoding(address) {
          $.each(address, function () {
              customerlocationID = this["ID"];
              var currValAddress = this["AddressLine1"];
              var Latitude = this["Latitude"];
              var Longitude = this["Longitude"];
              var LatLang = new google.maps.LatLng(Latitude, Longitude);
              var addresse = {
                  zoom: 8,
                  center: LatLang,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById('map'), addresse);
  
  
              // Bounds for North America
              var strictBounds = new google.maps.LatLngBounds(
              new google.maps.LatLng(15.70, -160.50),
              new google.maps.LatLng(68.85, -55.90));
  
              // Listen for the dragend event
              google.maps.event.addListener(map, 'dragend', function () {
                  if (strictBounds.contains(map.getCenter())) return;
                  // We're out of bounds - Move the map back within the bounds
  
                  var c = map.getCenter(),
                      x = c.lng(),
                      y = c.lat(),
                      maxX = strictBounds.getNorthEast().lng(),
                      maxY = strictBounds.getNorthEast().lat(),
                      minX = strictBounds.getSouthWest().lng(),
                      minY = strictBounds.getSouthWest().lat();
  
                  if (x &lt; minX) x = minX;
                  if (x &gt; maxX) x = maxX;
                  if (y &lt; minY) y = minY;
                  if (y &gt; maxY) y = maxY;
  
                  map.setCenter(new google.maps.LatLng(y, x));
              });
  
              // Limit the zoom level
              google.maps.event.addListener(map, 'zoom_changed', function () {
                  if (map.getZoom() &lt; minZoomLevel) map.setZoom(minZoomLevel);
              });
          });
      });
      codeAddress(customerlocationID, Rad);
  }
  
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  
  function codeAddress(customerlocationID, Rad) {
      infoBubble = new InfoBubble({
          map: map,
          shadowStyle: 0,
          padding: 10,
          borderRadius: 10,
          arrowSize: 15,
          maxWidth: 300,
          borderWidth: 1,
          borderColor: '#ccc',
          arrowPosition: 50,
          arrowStyle: 0
      });
      $.getJSON('/Dashboard/LoadWorkerList1' + '?customerLocationID=' + customerlocationID + '&amp;radius=' + Rad, function Geocode(addresses) {
          $.each(addresses, function () {
              var currVal = this["AddressLine1"];
              var Name = this["Name"];
              var Gender = this["Gender"];
              var Bdate = this["Birthdate"];
              ID = this["Worker_ID"];
              var distance = this["Distance"];
              var workerDetailIDDD = this["Worker_ID"];
              var Latitude = this["Latitude"];
              var Longitude = this["Longitude"];
              var LatLang = new google.maps.LatLng(Latitude, Longitude);
  
              var marker = new google.maps.Marker({
                  map: map,
                  icon: '/Content/images/male.png',
                  position: LatLang,
                  title: currVal
              })
  
              var link = $('&lt;a href="#"&gt;' + currVal + '&lt;/a&gt;').data('location', LatLang);
              $('#places').append($('&lt;li id=\'List\' class=\'List\'&gt;').append(link));
              link.on('click', function (event) {
                  event.preventDefault();
                  google.maps.event.trigger(addresses[0], "click");
                  if (selectedMarker) {
                      selectedMarker.setIcon('/Content/images/male.png');
                  }
                  marker.setIcon('/Content/images/maleclicked.png');
                  selectedMarker = marker;
                  infoBubble.removeTab(0);
                  infoBubble.addTab(Name, "Name: " + Name + "&lt;br&gt; Address: " + currVal + "&lt;br&gt; Gender: " + Gender + "&lt;br&gt; Birthdate: " + Bdate + "&lt;br&gt; Distance: " + distance + "&lt;br&gt;&lt;br&gt;" + '&lt;center&gt;&lt;a href="/Dashboard/WorkerMapDetail?workerId=' + workerDetailIDDD + '" onclick="window.open(this.href,height=850,width=1200);return false""&gt;&lt;span style="font-size: 12px !important"&gt;View Profile&lt;/span&gt;&lt;/a&gt;&lt;/center&gt;');
                  infoBubble.open(map, marker);
              });
  
  
              google.maps.event.addListener(map, 'idle', function () {
                  $('#places li').each(function () {
                      var inside = (map.getBounds().contains($(this).find('a').data('location'))) ? '' : 'none';
                      $(this).css('display', inside);
                  });
              });
  
              // Listen for user click on map to close any open info bubbles
              google.maps.event.addListener(map, "click", function () {
                  infoBubble.close();
                  marker.setIcon('/Content/images/male.png');
              });
  
              google.maps.event.addListener(map, "dragstart", function () {
                  infoBubble.close();
                  marker.setIcon('/Content/images/male.png');
              });
              google.maps.event.addListener(marker, 'click', (function (marker, i) {
                  return function () {
                      if (selectedMarker) {
                          selectedMarker.setIcon('/Content/images/male.png');
                      }
                      marker.setIcon('/Content/images/maleclicked.png');
                      selectedMarker = marker;
                      infoBubble.removeTab(0);
                      infoBubble.addTab(Name, "Name: " + Name + "&lt;br&gt; Address: " + currVal + "&lt;br&gt; Gender: " + Gender + "&lt;br&gt; Birthdate: " + Bdate + "&lt;br&gt; Distance: " + distance + "&lt;br&gt;&lt;br&gt;" + '&lt;center&gt;&lt;a href="/Dashboard/WorkerMapDetail?workerId=' + workerDetailIDDD + '" onclick="window.open(this.href,height=850,width=1200);return false""&gt;&lt;span style="font-size: 12px !important"&gt;View Profile&lt;/span&gt;&lt;/a&gt;&lt;/center&gt;');
                      infoBubble.open(map, marker);
                  }
              })(marker, currVal));
          })
          google.maps.event.trigger(map, 'bounds_changed');
      })
  }
  window.onload = function () {
      initialize();
  }
  </code></pre>
  
  <p>Thanks in advance !</p>