title: How do I stop the Google Maps API from automatically refreshing?
body: <p>Current behaviour: The page constantly refreshes my location and the entire map.</p>
  
  <p>Desired behaviour: I only want to find and display the current location once, not continuously.</p>
  
  <p>How can I achieve this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;whereami&lt;/title&gt;
  &lt;style type="text/css"&gt;
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key= xyz " type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  function onSuccess(position) {
  var lat=position.coords.latitude;
  var lang=position.coords.longitude;
  var myLatlng = new google.maps.LatLng(lat,lang);
  var mapOptions = {zoom: 17,center: myLatlng}
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker = new google.maps.Marker({position: myLatlng,map: map});
  }
  
  function onError(error) {}
  
  var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 0 });
  google.maps.event.addDomListener(window, 'load', onSuccess);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="geolocation"&gt;&lt;/div&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>