LatLong location on Google map on bootstrap modal not centered initially - google-maps

Question

I display a google map on a bootstrap modal when the modal is shown, and I set the center of the map to be a latLong location:
$('#result-details-modal').on('shown.bs.modal', (e) => {
this.canGetAddress = true;
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();
//this.addMarkersToMap();
//this.bindAutoCompleteToMap();
})
And the map initially starts with the location of the latitude and longitude (should be in the center) being in the top left corner of the map. Then when I close the modal and reopen it, the latlong location is centered correctly in the map. So it is to do with timing. How come the latlong location starts off in the top left corner of the map, rather than the center?
Here is all my relevant code. Try not to be put off if you haven't done angular 2. The question isn't really about angular 2:
html:
<div id="map" #map></div>
css:
#map {
height: 400px;
width:400px;
max-width: none !important;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#map > div {
border-radius: 10px;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
typescript:
selectedResult;
subscription: Subscription;
#ViewChild('areaInput') areaInput;
#ViewChild('map') mapInput;
map;
autocomplete;
zoom: number = 8;
options = {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13
};
canGetAddress: boolean;
constructor(private resultSelectionService: ResultSelectionService) {
resultSelectionService.resultSelected$.subscribe(
result => {
this.selectedResult = { result };
$('#result-details-modal').modal('show');
$('#result-details-modal').on('shown.bs.modal', (e) => {
this.canGetAddress = true;
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();
//this.addMarkersToMap();
//this.bindAutoCompleteToMap();
})
console.log(this.selectedResult.result);
});
}
ngAfterViewInit() {
this.initMap();
}
resizeMap() {
google.maps.event.trigger(this.map, "resize");
}
initMap() {
this.map = new google.maps.Map(document.getElementById('map'), this.options);
this.resizeMap();
}
setMapCenter(lat: number, lng: number) {
var myLatLng = {lat: lat, lng: lng};
this.map.setCenter(myLatLng);
}

Answer 1

The solution was to simply change the order of resizing the map and setting the map center.
THIS:
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();
BECOMES:
this.resizeMap();
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);