Home › Forums › WoodMart support forum › Sticky header – Disappear shortcode with the Google map
Sticky header – Disappear shortcode with the Google map
- This topic has 6 replies, 2 voices, and was last updated 5 years, 6 months ago by Artem Temos.
-
AuthorPosts
-
May 28, 2019 at 7:29 pm #126145
antamirParticipantHi,
In the main menu for the “Kontakt” tab, I use block html. It works correctly. The problem arises for the sticky header, when I hover over Contact, the shortcode with the Google map disappears.Below are screenshots:
1) Main Menu header – http://oi63.tinypic.com/29e0n7d.jpg
2) Sticky header – http://oi68.tinypic.com/4so9c5.jpg
3) Two errors in the console- http://oi63.tinypic.com/14vtc2c.jpgTwo errors in the console:
1) Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required util.js:224
2) Google Maps JavaScript API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-versionThe problem occurs on browsers: Chrome, Edge, Firefox
I have the latest version of WordPress, WooCommerce, Woodmart Template, PHP 7.3
May 29, 2019 at 6:09 am #126176
Artem TemosKeymasterHello,
Thank you so much for purchasing our theme and contacting our support center.
Currently, you are using a sticky header clone option and unfortunately, Google Map doesn’t work in this case. Try to use a real header clone instead. Read more information in our documentation https://xtemos.com/docs/woodmart/header-builder/enable-sticky-header-option/
Kind Regards
XTemos StudioMay 29, 2019 at 6:30 pm #126350
antamirParticipantThank you for your response.
On the second version of the store I added a map in the iframe and then there is no problem:
<iframe src="https://www.google.com/maps/d/embed?mid=1Yhs6ke6JAg0WsgkICnkTfI1PS873t4FY&hl=pl" width="100%" height="450"></iframe>
I understand that the problem with Your shortcode (with Maps) is that the menu width changes when it’s sticky and that’s why it cuts the map?
Can not fix this CSS, the problem is with JS?
Your map looks much nicer, that’s why I ask.May 30, 2019 at 7:33 am #126395
Artem TemosKeymasterTry to customize the file
woodmart/inc/shortcodes/google-map.php
and replace this code https://prnt.sc/nv9v21 with this onejQuery(document).ready(function() { jQuery('body').on('google_map_init', function (e,id) { if ( jQuery('.google-map-' + id).length > 0 ) { new Maplace({ locations: [ { lat: <?php echo esc_js( $lat ); ?>, lon: <?php echo esc_js( $lon ); ?>, title: '<?php echo esc_js( $title ); ?>', <?php if( $title != '' && empty( $content ) ): ?> html: <?php echo json_encode( $marker_content ); ?>, <?php endif; ?> icon: '<?php echo esc_js( $marker_icon ); ?>', animation: google.maps.Animation.DROP } ], controls_on_map: false, title: '<?php echo esc_js( $title ); ?>', map_div: '.google-map-' + id, start: 1, map_options: { zoom: <?php echo esc_js( $zoom ); ?>, scrollwheel: <?php echo 'yes' === $scroll ? 'true' : 'false'; ?> }, <?php if($style_json != ''): ?> styles: { '<?php esc_html_e('Custom style', 'woodmart') ?>': <?php $styles = function_exists( 'woodmart_decompress' ) ? woodmart_decompress( $style_json, true ) : '{}'; echo rawurldecode( $styles ); ?> } <?php endif; ?> }).Load(); } }); jQuery('body').trigger('google_map_init', [<?php echo esc_js( $id ); ?>] ); });
And also put this part to the custom JS section in Theme Settings
setTimeout(function () { jQuery('.whb-sticky-header .woodmart-google-map').html('').addClass('google-map-500'); jQuery('body').trigger('google_map_init', [500]); }, 500);
Regards
May 30, 2019 at 7:36 am #126396
Artem TemosKeymasterCustom JS should be added on document ready action.
June 2, 2019 at 12:14 pm #126800
antamirParticipantPerfect, everything works. Thank you very much Artem for help.
You have created a beautiful template, a very friendly management panel.June 3, 2019 at 6:14 am #126856
Artem TemosKeymasterThank you for your kind words!
-
AuthorPosts
The topic ‘Sticky header – Disappear shortcode with the Google map’ is closed to new replies.
- You must be logged in to create new topics. Login / Register