title: HTML5 geolocation marker movement and map update
body: <p>I am working on a location-based app for a school project and the following script paints the map with a new marker every time the GPS updates, leaving trails of markers. How do I make it so that whenever the GPS updates the map is displayed with the updated map marker positioned at the center of the map (which is like what all mobile map app does with the marker moving in accordance to user's movement)? Thank you.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Geolocation default&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /&gt;
  &lt;script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var map = null;
  
      const POSITION_OPTIONS = {enableHighAccuracy:true, maximumAge:30000, timeout:27000};
  
      function GetMap() {
          map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'ArqqdSR0U_ZzTkRh5W_3p0yukEEJ5X0L5QE9rg1CK1uyWgGz1n0Fi_-c2i2IfSN6' });
          GetLocation();
      }
  
      function GetLocation() {
          //check if location api supported
          if (!!navigator.geolocation) {
  
              //Update location
              navigator.geolocation.watchPosition(UpdateLocation,HandleErrors,POSITION_OPTIONS);
          }
      }
  
      function UpdateLocation(position) {
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
  
          //move map to new location and zoom in
          map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });
  
          var loc = new Microsoft.Maps.Location(latitude, longitude);
  
          var pin = new Microsoft.Maps.Pushpin(loc); 
          map.entities.push(pin);
      }
  
      function HandleErrors(error) {
          //handle geolocation errors and alert user
          switch (error.code) {
              case error.PERMISSION_DENIED: alert("user did not share geolocation data");
                  break;
  
              case error.POSITION_UNAVAILABLE: alert("could not detect current position");
                  break;
  
              case error.TIMEOUT: alert("retrieving position timed out");
                  break;
  
              default: alert("unknown error");
                  break;
          }  
      }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="GetMap();" style="padding:0;margin:0;"&gt;
  
  &lt;div id="myMap" style="position: absolute; width: 100%; height: 100%;"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>