Overcoming the Malsal Position of the Midpoint of Google Maps on Modal

When creating Google Maps on Modal in the LTE Admin template, there was a problem that made me confused.

The position of the midpoint of Google maps is always in the upper left corner. Even though I have set the midpoint on the event trigger resize, the position is still in the upper left corner.

After shifting:

Meanwhile, the code that I use when the modal event is displayed.

$("#modal-peta").on("shown.bs.modal", function() {
    
     google.maps.event.trigger(peta, "resize", function() {
         peta.setCenter(peta.getCenter());
     });

});

Apparently something is wrong with the code.

After I searched with the keywords "Google Maps top left center" on Google, I found the answer.

It turned out that I was wrong in placing the function to adjust the position of the center.

If we look at the code above, the function setCenter()will be called when the map is resized.

Solution:

The function setCenter()must be called when modal is displayed, not when the map is resized. So the code will be like this:

$("#modal-peta").on("shown.bs.modal", function() {

    // ambil dulu titik tengahnya
    var tengah = peta.getCenter();
    
    // resize
    google.maps.event.trigger(peta, "resize");
    
    // set ulang titik tengah
    peta.setCenter(tengah);

});

The result:

Reference: http://stackoverflow.com/a/8559243