title: how do I center a map on my current location html5
body: <p>OK - this one I'm fairly sure is just me working on something way too late in the evening, and  just missing something really simple, so I really apologise if this is something I've missed in research, but I've trawled and trawled...</p>
  
  <p>I have a map that shows many many markers perfectly (a few thousand) that is loaded from a nice xml file, however I really want the map to center on the clients current location. If I hard wire it, all fine, however the dynamic bit is proving waaay too hard. I've looked in the Google docs about it, and looked over here, and even tried reverse engineering some other sites... here is my code running on the body.onload.initialize()</p>
  
  <pre><code>var myLat = 35.702069;                     // default location to set centre
  var myLng = 139.775327;                    // default location to set centre
  
  var myLatlng = new google.maps.LatLng(myLat,myLng);
  //Set up the options for the map
  var myOptions =
          {
          zoom: 12,            // Set the zoom level - 15 is good for a suburb
          minZoom: 10,         // Stop zooming too far out
          center: myLatlng,    // ------ centre on the current location ------
          mapTypeId: google.maps.MapTypeId.ROADMAP
          }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // pop a marker in the place the map is centred... current location
  var myImage = new google.maps.MarkerImage('./images/markers/arrow.png');
  var marker = createMarker(GetHomeLocationPopup(), myLatlng, myImage);
  </code></pre>
  
  <p>I've tried using things like:</p>
  
  <pre><code>var myLat = position.coords.latitude;
  var myLng = position.coords.longitude;
  </code></pre>
  
  <p>however these don't look like they are exposed in this context.</p>
  
  <p>Here are my declarations:</p>
  
  <pre><code>&lt;body onload="initialize()" onunload="GUnload()"&gt;
  &lt;section id="content" style="width:70%; height:80%"&gt;
      &lt;div id="map_canvas" style="width:100%; height:80%"&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'd really not like to use other third-party libraries, and stick a native to the Google code as possible. </p>
  
  <p>Any help gratefully received - and it will mean that I can sleep better :-\</p>