Google Maps Api - Maps.setcenter Doesn't Seem To Be Centering To Users Position

I've been using the Google Maps API, and one thing is particularly bugging me. I set the original Map on page load, and then once the user clicks a 'sign in' button and shares the

Solution 1:

The problem is the order you are doing things. The map.setCenter to the user's position runs before the time outs fire on the addMarkerWithTimeout calls. When those markers are added to the map, their infowindows open, which centers the map to show the last infowindow opened.

one option to fix this is to set disableAutoPan: true on the infowindows.

proof of concept fiddle

code snippet:

var neighborhoods = [{
  lat: -36.862338,
  lng: 174.7425013
}, {
  lat: -36.867204,
  lng: 174.7692113
}, {
  lat: -36.848362,
  lng: 174.7426733
}, {
  lat: -36.845028,
  lng: 174.7748043
}, {
  lat: -36.862644,
  lng: 174.7340973
}, {
  lat: -36.862775,
  lng: 174.7836023
}];
var markers = [];
var map;
var dabblers = "https://maps.google.com/mapfiles/ms/micons/blue.png";
var yourLocation = "https://maps.google.com/mapfiles/ms/micons/red.png";
var myLocationIconArray = [];
var hasHappened = false;
var infoWindowContentString = '';
var dabblerInfoWindow = null;
var addInfowindow;
var distanceArray = [];
var defaultPos = {
  lat: -36.8527785,
  lng: 174.7617562
};
var centerPos;

var dabblersArray = [{
  lat: -36.862338,
  lng: 174.7425013,
  type: 'sweet'
}, {
  lat: -36.867204,
  lng: 174.7692113,
  type: 'sweet'
}, {
  lat: -36.848362,
  lng: 174.7426733,
  type: 'sweet'
}, {
  lat: -36.845028,
  lng: 174.7748043,
  type: 'savoury'
}, {
  lat: -36.862644,
  lng: 174.7340973,
  type: 'savoury'
}, {
  lat: -36.862775,
  lng: 174.7836023,
  type: 'savoury'
}];

/* Initializes map with custom styles, centers location, 
   and defines Map UI */functioninitMap() {
  var customMapType = new google.maps.StyledMapType([{
    stylers: [{
      hue: '#8c8c8c'
    }, {
      visibility: 'simplified'
    }]
  }, {
    elementType: 'labels',
    stylers: [{
      visibility: 'off'
    }]
  }, {
    elementType: 'landscape',
    stylers: [{
      color: '#e6e6e6'
    }]
  }, {
    featureType: 'road',
    stylers: [{
      color: '#ffffff'
    }]
  }, {
    featureType: 'road.highway.controlled_access',
    stylers: [{
      color: '#cccccc'
    }]
  }, {
    featureType: 'road.arterial',
    stylers: [{
      color: '#cccccc'
    }]
  }, {
    featureType: 'water',
    stylers: [{
      color: '#dce6e6'
    }, {
      "lightness": -10
    }, {
      "saturation": -30
    }]
  }, {
    featureType: 'poi',
    stylers: [{
      visibility: 'off'
    }]
  }, {
    featureType: 'transit.line',
    stylers: [{
      visibility: 'off'
    }]
  }], {
    name: 'Custom Style'
  });
  var customMapTypeId = 'custom_style';
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -36.8527785,
      lng: 174.7617562
    }, // Auckland City coordszoom: 15,
    disableDefaultUI: true,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    fullscreenControl: false,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
    }
  });
  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);
  map.setOptions({
    draggable: false,
    zoomControl: false,
    zoomControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    scrollwheel: false,
    disableDoubleClickZoom: true
  });
  drop();
}

/* Takes positions in neighborhoodsArray and runs each through 
   the addMarkerWithTimeout function */functiondrop() {
  var delay = 800;
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200 + delay);
  }
}

/* Takes position (lat / long) and timeout parameters and converts 
   into Google Map Markers. Then adds to Google Map. */functionaddMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: dabblers,
      draggable: false,
      clickable: false
    }));
  }, timeout);
}

/*  Clears original markers from map and sets relative arrays to [] */functiondeleteMarkers() {
  for (var x = 0; x < markers.length; x++) {
    markers[x].setMap(null);
  }
  markers = [];
  neighborhoods = [];
}

/* Adds your location & infoWindow to map after signIn */functionaddMarker(location, addInfowindow) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    animation: google.maps.Animation.DROP,
    icon: yourLocation,
    draggable: false,
    clickable: true
  });
  if (addInfowindow == null) {
    var myLocationInfowindow = new google.maps.InfoWindow({
      content: "Your location",
      disableAutoPan: false
    });
    myLocationInfowindow.open(map, marker);
    myLocationIconArray.push(marker);
  } else {
    var myLocationInfowindow = new google.maps.InfoWindow({
      content: infoWindowContentString,
      disableAutoPan: true
    });
    myLocationInfowindow.open(map, marker);
    myLocationIconArray.push(marker);
  }
}

/* Checks if Users browser / device is capable of Geolocation. If it is, gets current position */functiongetUserLocation(onComplete) {
  map.setOptions({
    draggable: true,
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: false
  });

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      centerPos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(centerPos);
      addMarker(centerPos);
      onComplete();
    }, function() {
      handleLocationError(true, addInfowindow, map.getCenter());
    });
  } else {
    //Browser doesn't support GeolocationhandleLocationError(false, addInfowindow, map.getCenter());
  }
}

/* Removes elements, and adds Dabblers to map */functionrunAllChainEvents() {
  getUserLocation(addDabblerArrayToMap);
}

/* Handles error if Users browser / device is not capable of Geolocation
   lookup functionality. Places their location at centre of Auckland. */functionhandleLocationError(browserHasGeolocation, addInfowindow, defaultPos) {
  if (browserHasGeolocation) {
    infoWindowContentString = "Sorry, we can't get your location.";
  } else {
    infoWindowContentString = "Your current browser does not support Geolocation.";
  }
  addInfowindow = new google.maps.InfoWindow({
    content: infoWindowContentString,
    disableAutoPan: true
  });
  map.setCenter(defaultPos);
  addMarker(defaultPos, addInfowindow);
  addDabblerArrayToMap(null);
}

/* Takes positions in dabblersArray and runs each through 
   the addMarkerWithTimeout function. Then calculates the 
   distance between user and dabblers.   */functionaddDabblerArrayToMap(position1) {
  var distance;
  var dabblerLocation;
  deleteMarkers();
  position1 = centerPos;

  if (position1 == null) {
    for (var z = 0; z < dabblersArray.length; z++) {
      markers.push(new google.maps.Marker({
        position: {
          lat: dabblersArray[z].lat,
          lng: dabblersArray[z].lng
        },
        map: map,
        icon: dabblers,
        draggable: false,
        clickable: true,
        id: dabblersArray[z].type
      }));
    }
  } else {
    var usersPosition = new google.maps.LatLng(centerPos.lat, centerPos.lng);

    for (var y = 0; y < dabblersArray.length; y++) {
      dabblerLocation = new google.maps.LatLng(dabblersArray[y].lat, dabblersArray[y].lng);

      distance = google.maps.geometry.spherical.computeDistanceBetween(usersPosition, dabblerLocation);
      distance = parseFloat(distance / 1000).toFixed(2);
      distanceArray.push(distance);

      dabblerInfoWindow = new google.maps.InfoWindow({
        content: distance + "km",
        disableAutoPan: true
      });

      markers.push(new google.maps.Marker({
        position: {
          lat: dabblersArray[y].lat,
          lng: dabblersArray[y].lng
        },
        map: map,
        icon: dabblers,
        draggable: false,
        clickable: true,
        id: dabblersArray[y].type
      }));
      dabblerInfoWindow.open(map, markers[y]);
    }
    // I shouldn't need to add this here, but have tried to set Center//    position manually again here to no avail also.// setTimeout(function() {
    map.setCenter(centerPos)
      //}, 5000);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
}
#map {
  height: 90%;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script><divid="map"></div><buttononClick="runAllChainEvents();">Sign in</button>