title: Center pin google maps
body: <p>I need to make a page that gives the user's latitude and longitude, and then allow the user to click a button to allow them to center the google map around the pin (which shows their current location). I'm completely confused on how to do this. I assume it would be a function. I've declared the function in my code but I'm not sure how to execute this. Any help would be greatly appreciated. Thank you!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  
  &lt;!-- This page will allow the suer to track their location through means of the HTML5 Geolocation feature --&gt;
  
  &lt;title&gt;Assignment 4:Track My Location&lt;/title&gt;
  &lt;meta name="author" content="Alan Sylvestre" /&gt;
  
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      function myLocation() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(locationReveal);
          } else {
              alert("Please use a different browser that supports geolocation.");
          }
      }
  
  
      window.onload = myLocation;
  
      function locationReveal(position) {
          showMap(position.coords);
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
          var div = document.getElementById("location");
          div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
      }
  
      var map;
      function showMap(coords) {
          var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
          var mapOptions = {
              zoom : 18,
              center : googleLatAndLong,
              mapTypeId : google.maps.MapTypeId.SATELLITE
          };
          var mapDiv = document.getElementById("map");
          map = new google.maps.Map(mapDiv, mapOptions);
          addMarker(googleLatAndLong);
  
      }
  
  
      google.maps.Map(mapDiv, mapOptions);
  
      var marker;
      function addMarker(latlong) {
          var markerOptions = {
              position : latlong,
              map : map
          };
          marker = new google.maps.Marker(markerOptions);
      }
  
      var center;
      function calculateCenter() {
          center = map.getCenter();
      }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body style="background-color:yellow;" text="blue;"&gt;
  &lt;div align="center"&gt;
      &lt;h1&gt;Reveal My Location&lt;/h1&gt;
      &lt;p&gt;
          You know what's pretty cool? Tracking your location using a simple internet connection. By clicking this button, you're browser will track a global database and reveal your location in terms of latitude and longitude. Enjoy!
      &lt;/p&gt;
      &lt;div id="location"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;div id="map" style="width:400px; height:400px;"&gt;&lt;/div&gt;
      &lt;br&gt;
      &lt;input type="button" id="centerOfMap" value="Center" onclick="calculateCenter()"&gt;
      &lt;footer&gt;
          &lt;p&gt;
              &amp;copy; Copyright  by Alan Sylvestre
          &lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>