رفع مشکل نمایش نقشه گوگل در پنجره Modal ایجاد شده توسط بوت استرپ

یکی از مواردی که معمولا تو صفحه تماس با ما از اون استفاده می کنیم نمایش نقشه گوگل هست که کار رو برای کاربر خیلی راحت می کنه و با یه نگاه به نقشه متوجه میشه که ما کجای این دنیا قرار داریم 😉
مساله:
تو یکی از پروژه ها نیاز داشتم که کاربر خودش طول و عرض جغرافیایی رو مشخص کنه و برای این کار می خواستم در یه پنجره Modal که به وسیله Bootstrap ایجاد شده بود نقشه گوگل رو به کاربر نمایش بدم، مشکل این جا بود که در این حالت یه مشکل اساسی وجود داره و به جای نمایش نقشه، شما یه صفحه خاکستری رنگ رو می بینید.
راه حل:
برای رفع این مشکل باید تابع resize رو یه بار به صورت زیر فراخوانی کنیم

$('#myModal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, "resize");
});

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload the CAPTCHA.