Support » Plugin: WP Google Maps » Hiding map for mobile devices, chrome marker issue

  • Resolved user10522three

    (@zorrohere)


    Hi, I wanted to hide map for mobile displays by setting display to none but if I resize window in chrome, the marker gets misplaced. I love the plugin, it is perfect but this one issue is kind of annoying. I tried firefox it regenerates map from center but EDGE and Chrome misplaces marker to top left corner.

    EDIT: if I manually resize then it positions in center perfectly but if restore window then it fails to position in center. I have only 1 marker on map and it is zoomed in.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi there

    Thank you for getting in touch with us.

    We’d need to add in a few lines of custom JavaScript to the page to accommodate this as the map would need to be re-initialized as soon as the screen size reaches a certain break point.

    Please confirm what sort of screen size you’d like the map to be hidden at, and I’ll gladly send you the required code to achieve this 🙂

    Thread Starter user10522three

    (@zorrohere)

    I would like it to be shown at minimum width of 768px.

    Thanks for quick response and quick solution, I thought I will have to go back and forth a lot to explain exactly what it is happening but you did it in single post.

    Hi there

    Only a pleasure.

    Please go to wp-google-maps/js/wpgmaps.js and scroll down to line 148. You’ll find a block of code that is currently commented that provides similar functionality for resizing the map.

    Please replace this code with the following:

    	var map = this.map;
    	google.maps.event.addDomListener(window, "resize", function() {
            var window_width = jQuery(window).width();
            if( window_width <= 768 ){
                jQuery("#wpgmza_map").hide();
            } else {
                jQuery("#wpgmza_map").show();
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);     
            }
    	});

    I hope this helps?

    • This reply was modified 3 years, 11 months ago by Jarryd Long. Reason: Code formatting
    Thread Starter user10522three

    (@zorrohere)

    Great! It works perfectly.

    I just went ahead and uncommented that block of code, any reason that code is commented at the moment?

    Thanks.

    Hi there

    So glad to hear!

    We’d commented it out as we found that some users had experienced a ‘flickering’ effect on their maps – unfortunately we weren’t able to replicate the issue consistently on our side to rectify that.

    I hope this helps?

    Thread Starter user10522three

    (@zorrohere)

    Yes thanks for explanation. I am not experiencing any flickering so I guess it’s good.

    Maybe you can resolve flickering issue by debouncing the event, it basically stops resize event from triggering too frequently and adds some delay between two triggers. Just offering a suggestion in case it helps you.

    Thanks.

    Hi there

    Only a pleasure.

    Thank you so much for your feedback, I’ll definitely look into this.

    Just shout if there’s anything else I can assist you with 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Hiding map for mobile devices, chrome marker issue’ is closed to new replies.