Blog for Learning

| lesson material | material summary | questions and answers | definitions | types and examples | other information | materi pelajaran | ringkasan materi | pertanyaan dan jawaban | definisi | jenis-jenis dan contoh-contoh | informasi lainnya |

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

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.
Position the center of Google Maps in the corner
After shifting:
Position the midpoint 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:
The central position of Google Maps in Modla
0 Komentar untuk "Overcoming the Malsal Position of the Midpoint of Google Maps on Modal"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top