CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3locationbootstrap-modal
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12443

LatLong location on Google map on bootstrap modal not centered initially

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);
}

Upvotes: 0

Views: 339

Answers (1)

BeniaminoBaggins
BeniaminoBaggins

Reputation: 12443

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()
);

Upvotes: 1

Related Questions