I didn’t see the resize function anywhere either. However, I did come up with a method which can trigger the map to be resized via JavaScript:
if(typeof google !== 'undefined' && typeof MYMAP[wpgmaps_localize[entry]['id']] !== 'undefined'){ // Make sure Google Maps API is loaded and WP Google Maps has been initiated
google.maps.event.trigger(MYMAP[wpgmaps_localize[entry]['id']].map,'resize'); // Update Google Map Size
}
Place the above JavaScript wherever/whenever you want to have the WP Google Maps map instance be resized (ex. I have a $(window).on(‘load’) function which matches column heights with a map being one element and I’ve placed the code above right after the column height functionality is called).
Hopefully this is helpful.
After trying so many times to show my google maps on popup window in popup maker plugin in WordPress, I found out that the map should be resized again after loading in a popup, now I don’t know where to add the resize or re-init the map! the page I’m working on is this page. this is my plugin’s map.js file. where and how I should add resize or re-init functionality?
@claymore07 – This is more of a question for the Popup Maker plugin’s support forum since you have the code you need for updating the map size included in my post above. The question for you is, how can you make popup maker trigger this JavaScript for your popup (thus making it a question which should be asked here: https://ww.wp.xz.cn/support/plugin/popup-maker)
@claymore07 – You can use our (Popup Maker) JS api to do this. Check out this overview.
jQuery('#pum-123').on('pumAfterOpen', function () {
// Do something here.
});
You may need to try different events (pumAfterOpen) from the linked doc to find the one that does it best. IE timing it correctly could make the difference between it resizing after the popup is visible, or before it opens. I would try pumAfterOpen and pumAfterReposition for best results.
Hope that helps.
@kzeni
Thank you for your answer, I’m new to WP. in your example code you have MYMAP, I can’t find a name for my map, please help me, I’m desperate.
@danieliser
Thank you so much it is greate help. where should i add this code? in the main page or popup page or in js file?
@claymore07 – This is JavaScript / jQuery which technically doesn’t have dependence on WordPress knowledge. MYMAP is a variable this plugin uses within its JavaScript to refer to the map(s). There isn’t anything you should need to edit/replace in my code snippet (if I remember correctly, this was a few months ago).
@kzeni @danieliser
I’ve got this code working on console, and should be add to template custom js file.
tanx alot for your help. best regards
jQuery('#pum-5425').on('pumAfterOpen', function () {
if(typeof google !== 'undefined' && typeof map4 !== 'undefined'){ // Make sure Google Maps API is loaded and WP Google Maps has been initiated
google.maps.event.trigger(map4,'resize'); // Update Google Map Size
}
});
-
This reply was modified 9 years, 2 months ago by
claymore07.
@ruchisupport, @claymore07 – Article looks good, though I would typically recommend adding any custom JS via wp_footer rather than wp_head. Here is the starter code we give our users for adding custom JS: http://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
That said for Popup Maker support in your article add
add_action( 'wp_footer', 'my_custom_popup_scripts', 500 );
function my_custom_popup_scripts() { ?>
<script type="text/javascript">
(function ($, document, undefined) {
jQuery('#pum-5425').on('pumAfterOpen', function () {
if(typeof google !== 'undefined' && typeof map4 !== 'undefined'){
google.maps.event.trigger(map4,'resize'); // Update Google Map Size
}
});
}(jQuery, document))
</script><?php
}
