Put a map on top of the navbar

Hi there,

As you can see on this post https://theme.co/apex/forum/t/non-profit-expanded-demo/10100/6 i’m trying since several days to put a google map in top on the navbar like on the non-profit demo.
I tried to add the shortcode to the revslider and select it as masthead slider but there is just a blank space (see screenshot attached)

The map i want to show is from a third party plugin (WP google Map pro).
Can you please help me ?

I just tried with the shortcodes in this page http://demo.theme.co/integrity-1/shortcodes/map/ and this is the result

What am i doing wrong ?

Hello @boubacar,

Thanks for asking. :slight_smile:

The second screenshot you have shared is most probably an error related with Google Maps API key. In order to access Google Maps resources you need to create a project and get API key. Here is a resource that you can refer:

https://developers.google.com/maps/documentation/javascript/get-api-key

Please note that this has nothing to do with X Theme or Pro. Google has changed there policy wherein to access maps resources one has to create a project along with relevant details.

Thanks.

When i try the shortcodes or the third party plugin shortcodes in posts or pages they work just fine. I have a API key, i think it’s good on that side

Hello @boubacar,

Thanks for updating thread. :slight_smile:

If you still face any issues, kindly update us along with website URL.

Thanks.

Website link

http://map-action.com

Hi there,

Hi there,

Please kindly use this shortcode instead:

[x_google_map api_key="aaa" lat="40.7056308" lng="-73.9780035" zoom="12" zoom_control="true" drag="true" height="" hue="false" no_container="true" ][x_google_map_marker lat="40.7056308" lng="-73.9780035" start_open="false" info="" image=""][/x_google_map]

The shortcode above is the new set of code which gets the API Key. Please replace the aaa with your actual Google Map API Key.

Thank you.

Thank you, but as i said previously i want to use the map of a third party plugin. In that case what can i do ?

I tried the shortcode but still same issue.

Hi There,

It seems that you have enabled under construction page so we could not check your issue. Could you please provide us a way to access your site, so that we can look into it.

Thanks!

I have disabled under construction. Is there a way to send you my ID and password ? (hidden of course)

Hello @boubacar,

Looks like you forgot to share website URL. Can you please share website URL?

Thanks.

Hi,

It looks like you have added your map api key globally and re-adding it again creates an error.

Try to use the map iframe code instead.

eg.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.400025630832!2d144.95490481512752!3d-37.8040981797541!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d33b7f9a9d1%3A0x615ec2ddd8da29d5!2s329+Queensberry+St%2C+North+Melbourne+VIC+3051%2C+Australia!5e0!3m2!1sen!2sph!4v1511921078036" frameborder="0" style="border:0;width:100%;height:100%;" allowfullscreen></iframe>

Hope that helps

Hi, thanks for your help but it’s not working for me. I can see a kind of preview of the map in the slider editor (see picture below). but nothing appears on the main page.
That is the 1st problem, the second problem is i want to display my own custom map made with a third party plugin (WP Google map pro) using this shortcode [put_wpgm id=1]. Help me with that one please. Thanks

And it doesn’t matter if it’s in the slider or not. I just want it on top of the Navbar. Thanks

Hi There,

I am going to give a different approach (not with Slider) with the understanding that it would ultimately be your responsibility to take it from here, especially if the issue is on the 3rd party plugin.

Since this will require the child theme’s functions.php file. Please setup a child theme and don’t forget to activate it.

How To Setup Child Themes

Then add the following code to your child theme’s functions.php file (via FTP).

/**
Add a custom map on top of the home page
*/
function custom_map() { 
 if ( is_front_page() ) : ?>
  <div class="custom-map">
    <?php echo do_shortcode( 'YOUR SLIDER SHORTCODE HERE' ); ?>
  </div>
  <?php endif; 
}
add_action('x_after_site_begin','custom_map', 30);

Replace the YOUR SLIDER SHORTCODE HERE phrase on the code with your 3rd party map shortcode.

And since this code was tested on the latest version of PRO, please update your theme to the latest version.

Updating Your Themes and Plugins

Remember to clear all caches (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Hope it helps,
Cheers!

It works like a charm !!!
Thank you for the support.

Glad to hear it.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.