My Map is Not Showing On My Website

 

If your Map is not displaying on the front-end of your website, this could be due to any of a number of reasons. We will go through them in order of probability. Please follow the following steps, in order, to troubleshoot the problem.

 

 

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 thorougly, 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 Google Maps, use.

 

Ensure that your theme’s footer.php file has this hook by doing the following:

  1. Log in to the admin section of your WordPress site as an Administrator.
  2. Go to WordPress Dashboard → Appearance → 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.
  3. While viewing the footer.php file make sure that wp_footer(); is called just before the closing </body> tag. See the image below for an example.
  4. If the wp_footer(); code is missing from your theme add this line to your theme’s footer.php file: <?php wp_footer(); ?>. 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(); ?>.
  5. 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.
  6. 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.

 

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 our jQuery Troubleshooting article.

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 Google 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:

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:

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:

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?

We recently added the option to the Basic plugin to 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, you can go to WordPress Dashboard → Maps, select the Map you are working on and click the Edit link. Then, select the the Themes tab. Here can select a theme to fill the JSON text box. You then save the Settings and see if this helps.

 


 

If you are still experiencing problems or need more help, please post on our Support Forums or visit our Support Desk.  We will get the problem sorted out as soon as possible!

Was this article helpful to you?