Please try the following steps in sequence to resolve maps display issues
- Create a Google Maps API Key
- Flush/Empty/Delete Your Cache
- Check Your Theme’s footer.php File
- Verify That jQuery is Installed
- Are You Trying to Display the Map in Tabs or Accordions?
- Determine Whether Your Page is Producing Any JavaScript Errors
- Do You Have a Map Theme Selected?
Create a Google Maps API Key #
Please ensure you have followed these instructions for Creating a Google Maps API key. We suggest you go through that article thoroughly, comparing the information there with your own Google API Manager project. If after doing so, you are sure you have followed these instructions and that all of the required APIs are enabled, then refresh the page that contains the Map’s shortcode in your browser. If the Map is still not showing, please continue with Flush/Empty/Delete Your Cache.
Flush/Empty/Delete Your Cache #
Please ensure that your flush (or empty or delete depending on the software used) your cache files. If your web hosting provider has caching enabled on the web server, ensure that cache is emptied as well. If you are using the CDN option on your caching plugin, please ensure that XML files are excluded from the CDN.After doing so, refresh the page that contains the Map’s shortcode in your browser. If the Map is still not showing or if you know you are not running any caching software in WordPress or on your web server, please continue with Check Your Theme’s footer.php File
Check Your Theme’s footer.php File. #
Some custom WordPress theme developers forget to install a very important standard WordPress hook called wp_footer(); which many plugins, including WP Go Maps, use.
Ensure that your theme’s footer.php file has this hook by doing the following:
Log in to the admin section of your WordPress site as an Administrator.
Go to
WordPress Dashboard -> Appearance -> Theme Editor
Note: This function may be deactivated for security reasons and the Editor option may not be present on your WordPress site. If this is the case, you’ll need to view your WordPress theme’s footer.php file using a text editor and FTP. While viewing the footer.php file make sure that wp_footer(); is called just before the closing tag. See the image below for an example. If the wp_footer(); code is missing from your theme add this line to your theme’s footer.php file: . Note: This example is based on the previous line being straight HTML (which it normally is). If the line in your theme is PHP code use this code instead wp_footer(); ?>. If you have changed the footer.php file, save it and upload it to your server to your theme’s folder (where you downloaded it) if you are working with the file via FTP. If you modified your footer.php file, refresh the page that contains the Map’s shortcode in your browser. If the Map is still not showing or if you did not modify your footer.php file, please continue with Verify That jQuery is Installed.
checking for wp_footer();
Verify That jQuery is Installed #
If jQuery is not installed in your WordPress theme, you should be seeing the following error message where your Map should be displayed:
jquery-map-issue
If you are seeing this error message, please follow the troubleshooting steps in the I’m Getting a “jQuery not found” Error document
If you are not seeing this error message, please continue with Are You Trying to Display the Map in Tabs or Accordions.
Are You Trying to Display the Map in Tabs or Accordions? #
If you are trying to display the Map in a Tab or an Accordion and your Map is not displaying on the front-end of your site, you’ll need to modify the WP Go Maps code to work with your particular Tab or Accordion implementation. We have implemented a check for this but it may not work as it should with your particular theme or plugin.
Please open wp-google-maps-pro/js/core.js in a text editor and search for the following code:
JS
jQuery(‘body’).on(‘tabsactivate’,function(event, ui){
for(var entry in wpgmaps_localize){
initMap(wpgmaps_localize[entry][‘id’],’all’,false);
}
});
Directly below this text, add the following:
JS
jQuery(‘body’).on(‘click’,’.the_class_name_of_your_tab_or_accordion’,function(event, ui){
for(var entry in wpgmaps_localize){
InitMap(wpgmaps_localize[entry][‘id’],’all’,false);
}
});
Replace the ‘.the_class_name_of_your_tab_or_accordion’ with the relevant class name of the element from your plugin or theme.
If this code above does not work properly, you can try adding the following:
JS
jQuery(‘.the_class_name_of_your_tab_or_accordion’).click(function(){
setTimeout(function(){
for(var entry in wpgmaps_localize){
InitMap(wpgmaps_localize[entry][‘id’],’all’,false);
}
},500);
});
You can then set the timeout in milliseconds (where the 500 is) to what you require on your site, either a higher or lower number.
Change the modified file and upload back to the appropriate folder on your web server. Refresh the page that contains the Map’s shortcode in your browser. If the Map is still not showing, please continue with Determine Whether Your Page is Producing Any JavaScript Errors.
Determine Whether Your Page is Producing Any JavaScript Errors #
Use this WordPress tutorial to help identify JavaScript errors on your website’s front-end. See https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors#Chrome
Alternatively, review this page for further help.
Do You Have a Map Theme Selected? #
The WP Go Maps Plugins allow you to enter custom JSON theme data. It allows you to style the map to suit your site. However, there are some cases where the lack of a theme will cause the Map or the Markers to no longer show on your site. To rectify this, please navigate as follows to select a present theme and save the map
WP Go MAPS -> Maps (edit your chosen map) -> Themes
