title: Move google maps marker on Places Auto-complete
body: <p>I currently have a map that displays a marker on the users geolocation. I have a text input field set to Places Auto-complete. When a user searches a city name, a new marker is placed on the location. However, the old gelocation marker remains. I want to delete the old marker or move it so only 1 marker is on the map. How can I do this?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script&gt;
      var map;
  
      function initialize() {
          var mapOptions = {
              zoom: 12
       };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  
      // Get GEOLOCATION
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);
  
          map.setCenter(pos);
          var marker = new google.maps.Marker({
              position: pos,
              map: map,
              draggable:true
          });
        }, function() {
          handleNoGeolocation(true);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }
  
        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };
  
        map.setCenter(options.position);
  
      }
  
  // get places auto-complete when user type in location-text-box
      var input = /** @type {HTMLInputElement} */(
    document.getElementById('location-text-box'));
  
  
     var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.bindTo('bounds', map);
  
      var infowindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29),
        draggable:true
      });
  
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
          return;
        }
  
   // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
         map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
      marker.setIcon(/** @type {google.maps.Icon} */({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
      }));
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);
  
      var address = '';
      if (place.address_components) {
          address = [
          (place.address_components[0] &amp;&amp; place.address_components[0].short_name || ''),
          (place.address_components[1] &amp;&amp; place.address_components[1].short_name || ''),
          (place.address_components[2] &amp;&amp; place.address_components[2].short_name || '')
        ].join(' ');
      }
  
    });
  
  
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
          &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
          &lt;div&gt;
                &lt;input type="text" id="location-text-box"&gt;
                &lt;div id="map-canvas"&gt;&lt;/div&gt;
          &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>