Google Map API setCenter Method doesn't work

Question

So I have to add a "center" button to my page, which, when clicked the map will center on the pin by using setCenter Method. However, after I clicked my button, the maps goes blank instead of showing the center.

this is my code.

How to solve the problem? Thank you in advance!

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
  function init() {
    var addButton = document.getElementById("setcenter");
    addButton.onclick = handleSetCenterButtonClicked;
    getMyLocation();
  }


  window.onload = init;

  function getMyLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation);
    } else {
        alert("Oops, no geolocation support");
    }
  }

  function displayLocation(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);
  }

  var marker;
  var markerArray = new Array();

  function addMarker(latLong) {
    var markerOptions = {
        position : latLong,
        map : map
    };
    marker = new google.maps.Marker(markerOptions);

    markerArray.push(marker);
  }

  // this is my setCenter method function
  function handleSetCenterButtonClicked(coords) {

    var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);
    map.setCenter(latLng);
  }

  // this is my setCenter method function
</script>

Answer 1

Problem is in your function (besides a typo):

  function handleSetCenterButtonClicked(coords) {

    var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);
    map.setCenter(latLng);
  }

On click coords is of type MouseEvent which has no any information about lat/lng. It is not the same as MouseEvent from google api. It is not clear to which value you want to set center. To position of user who opened your page? Or to some other value?

If you want to position center to user location after he drags around you can add global variable:

var yourPos;

In function showMap() set it to known value:

yourPos = googleLatAndLong;

And use it in click handler:

  function handleSetCenterButtonClicked(coords) {

    //var latLng = new google.maps.LatLng(coords.lat(), coords.lng());
    //map.setCenter(latLng);

    map.setCenter(yourPos);
  }

Besides that there is no handling of case if user doesn't want to share his position.