Home Forums WoodMart support forum Sticky header – Disappear shortcode with the Google map

Sticky header – Disappear shortcode with the Google map

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #126145

    antamir
    Participant

    Hi,
    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.jpg

    Two 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-version

    The problem occurs on browsers: Chrome, Edge, Firefox

    I have the latest version of WordPress, WooCommerce, Woodmart Template, PHP 7.3

    #126176

    Artem Temos
    Keymaster

    Hello,

    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 Studio

    #126350

    antamir
    Participant

    Thank 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.

    #126395

    Artem Temos
    Keymaster

    Try to customize the file woodmart/inc/shortcodes/google-map.php and replace this code https://prnt.sc/nv9v21 with this one

    jQuery(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

    #126396

    Artem Temos
    Keymaster

    Custom JS should be added on document ready action.

    #126800

    antamir
    Participant

    Perfect, everything works. Thank you very much Artem for help.
    You have created a beautiful template, a very friendly management panel.

    #126856

    Artem Temos
    Keymaster

    Thank you for your kind words!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Sticky header – Disappear shortcode with the Google map’ is closed to new replies.