title: Google Maps API - How to only plot the first and last marker
body: <p>I am using <code>Geolocation</code> and the Google Maps API to create a tracking app. At the moment it tracks the users position using the <code>watchPosition()</code> function. It currently plots a new blue icon everytime it receives a new longitude and latitude position. However I just want it to plot the start position (which it already is, using the red marker.) and then for it to only show the blue icon when it receives the latest coordinates, instead of putting a blue icon on the map every time it receives a new position.</p>
  
  <p><a href="http://codepen.io/anon/pen/PwzVed" rel="nofollow">CodePen Demo</a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;style type="text/css"&gt;
      html {
          height: 100%;
      }
      body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
  
      #map_canvas {
          height: 100%;
          width: 100%;
      }
  &lt;/style&gt;
  
  &lt;div id="dvContent"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="map_canvas"&gt;
      Hello
  &lt;/div&gt;
  &lt;!-- &lt;input type="text" name="'adr" id="address" value="-41.2889, 174.7772" /&gt;
  &lt;input type="button" value="Start Watching" id="start"&gt;
  &lt;input type="button" value="Stop Watching" id="stop"&gt;
  &lt;input type="button" value="Delete Markers" id="delete"&gt; --&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      var watchID = null;
      var geo;
      var map;
      var startMarker = []; // Red Icon
      var endMarker = []; // Blue Icon
      var geo_options = {
          enableHighAccuracy: true, 
          maximumAge        : 10000000, 
          timeout           : 20000
      };
      var pathLineArray = new Array();
      var mypath;
      var geocoder;
      var mapMarkerRevCode;
  
      console.log(startMarker);
  
  
  
  $(document).ready(function(){
  
      function getGeoLocation(){
          if (navigator.geolocation) {
              return navigator.geolocation;
          } else {
              return "undefined";
          }
      }
  
      function startWatching(){
          watchID = geo.watchPosition(show_coords, geo_error, geo_options);
          // watchID = geo.getCurrentPosition(show_coords, geo_error, geo_options);
      }
  
      function stopWatching(){
          if (watchID!=null) {
              geo.clearWatch(watchID);
          }
      }
  
      $('#start').click(startWatching);
  
      $('#stop').click(stopWatching);
  
      if(geo = getGeoLocation()){
          startWatching();
      } else {
          alert('Geolocation is not supported');
      }
  });
  
  function show_coords(position){
  
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
  
      var latlng = new google.maps.LatLng(lat, lon);
  
      if (map) {
  
          // Makes it so that it doesnt have to reload the map everytime, it just pans to the new position
          map.panTo(latlng);
  
      } else {
          var myOptions = {
              zoom: 16,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          var mypath = new google.maps.Polyline({
              path: pathLineArray,
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 2,
              map: map
  
          });
  
          startMarker = new google.maps.Marker({
              position: latlng,
              map: map,
  
          });
  
      }
      // Push lat and long coords to this array
      pathLineArray.push(latlng);
  
      if (mypath) {
          mypath.setPath(pathLineArray);
  
      } else {
          mypath = new google.maps.Polyline({
              path: pathLineArray,
              strokeColor: '#FF0000',
              strokeOpacity: 1.0,
              strokeWeight: 4,
              map: map,
  
          });
      }
  
      endMarker = new google.maps.Marker({
              position: latlng,
              map: map,
              icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      });
  
  
  }
  
  
  function geo_error(error){
      switch(error.code){
          case error.TIMEOUT:
          alert("geolocation timeout");
          break;
          case error.POSITION_UNAVAILABLE:
          alert("Gelocation position unavailable");
          break;
          case error.PERMISSION_DENIED:
          alert("Permission denied");
          break;
          default:
          alert('Unknown error');
      }
  }
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>