Docs

[dhirczy]

Hi!

Im using Google Map via shortcode and the coordinates arent working. The coordinates are correct but the map is not placed at the right position.

the url is http://www.mz1.at/wordpress

its in the widgetbar.

the coordinates are 47.605249 and 15.678047

thanks for your help

[dhirczy]

it must have to do something with the shortcode. when i add it in cornerstone it works fine.

[Joao]

Hi There,

Is there any reason why you wouldn´t use the Google Maps Cornerstone Element.

If you are having troubles with the API Key, please watch the video below:

If you strictly want to use a shortcode please share the code with us so we can take a closer look

Thanks

Joao

[dhirczy]

Hi

I cant use the cornerstone element because i want the map in the widgetbar. the code is

[google_map lat=”47.605249″ lng=”15.678047″ zoom=”12″ zoom_control=”true” drag=”true” height=”45%”][/google_map]

thank you

[Rue Nel]

Hello There,

Thanks for the clarifications!

Google made some updates to its Google map api. What you are experiencing is because it is related to this:
http://googlegeodevelopers.blogspot.ca/2016/06/building-for-scale-updates-to-google.html

To resolve your issue and be able to just use the shortcode in your widget area, you need to generate an API key first. Follow the the video in our previous reply and take note of the API key. And then I would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

function my_add_frontend_scripts() {
  wp_register_script( 'cs-google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY');
  wp_enqueue_script( 'cs-google-maps' );
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts', 100);

Hope this make sense.

[dhirczy]

Thanks for your reply. I decided to place the Maps somewhere else on the Page but i’ve got another issue with that. I’ve got a tab element with 2 tabs and want to display a map on each tab but one is always grey. I googled thath issue and found tons of threads and also tried it by myself with this custom js:

function($){
$(‘.x-nav-tabs-item a’).click(function() {
setTimeout(function() {
$(‘.x-map’).find(‘iframe’).attr(‘src’, function (i,val) {return val;})
}, 100);
});
})(jQuery)

but it doesn’t work. could you have a look at it please?

http://www.mz1.at/wordpress/index.php/kontakt/

Thanks alot!

[Rue Nel]

Hello There,

Thanks for the updates! Please update the JS code and make use of this code instead:

jQuery(".linkkontakt").click(function(){
  jQuery(".x-btn-widgetbar").click();
});

function($){ 
  $('.x-nav-tabs-item a').click(function() {
    setTimeout(function() {
      $('.x-map').find('iframe').attr('src', function (i,val) {return val;})
    }, 100);
  });
})(jQuery);

Please let us know how it goes.

[dhirczy]

Hi

didn’t help 🙁

[Rad]

Hi there,

Please remove this javascript

function($){ 
  $('.x-nav-tabs-item a').click(function() {
    setTimeout(function() {
      $('.x-map').find('iframe').attr('src', function (i,val) {return val;})
    }, 100);
  });
})(jQuery);

Then add this CSS to your customizer’s custom CSS.

.x-tab-content>.x-tab-pane:not(.active) {
    display: block;
    height:0px;
    overflow:hidden;
    padding:0;
}

Hope this helps.

[dhirczy]

Works just perfect!! 🙂 🙂

Thank you so much!

[Prasant Rai]

You are most welcome. 🙂

[dhirczy]

Hi!

Its not working anymore 🙁

On the second tab its only showing part of the map. Could you have another look at it please?

http://www.mz1.at/wordpress/index.php/kontakt/

Thanks alot

[Jade]

Hi there,

Google API keys are binded to Domain Names, if you request a Google Service from a site that is not whitelisted the request gets tossed.

Go to your Google Console. https://console.developers.google.com/ Click in the left Menu API’s & Auth then Credential

Under Public API access click create new key and choose on the next Page Browser Key. You are now forced to enter all Domain Names that are allowed to make API request with this key.

Enter your Domain names use the new key and you should ready to go.

Let us know how it goes.

[Author]

Posts