jquery problem with google map

  • Resolved raizaduran

    (@raizaduran)


    9 years, 11 months ago

    well this is not exactly the problem of this theme, but I hope I can get a solution from experts out there.

    So I’m using a plugin Mappress to show google maps on my post. like this: http://www.indiavirtualinfo.com/shimla/

    Now if you notice, the map is visible when it’s normally posted, but not visible when it’s shown under the tab. I tried a couple of faq etc, and got to know this:

    This is an issue with the Google Maps API. Maps do not display properly when they are inside an element that is initially hidden, such as a hidden tab, slider, accordion, etc. MapPress includes a workaround for jQuery UI Tabs. For other libraries or controls, you’ll need to implement your own solution using Javascript.

    with a solution something like this:

    When a hidden element is displayed, you can redraw the map by calling its resize() method. For example to redraw the first map on the screen use:
    mapp0.resize();

    This example redraws maps inside elements with class ‘mycontrol’ when the element is clicked. Note that set Timeout is only needed if there is an animation (such as sliding into place) that must complete before the map is resized:

    jQuery(document).ready(function() {
    jQuery('.mycontrol').on('click', function() {
        jQuery(this).find('.mapp-canvas').each(function() {
            var id = jQuery(this).attr('id');
            var map = window[id];
            setTimeout(function() {
                map.resize();
            }, 350);
        });
    });
});

    But I don’t know where to place this code and how.

    Any help would be highly appreciated.

Viewing 13 replies - 1 through 13 (of 13 total)
  • bdbrown

    (@bdbrown)

    9 years, 11 months ago

    Hi raizaduran. For scripts I create a /js folder in my child theme. Then create a file, say my-scripts.js, in that folder and add your script, maybe including a //comment for what it does. Then, in your child theme functions.php file, you enqueue the script file:

    /* ------------------------------------------------------------------------- *
    Load custom js
/* ------------------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'add_my_scripts');
function add_my_scripts() {
    wp_enqueue_script('my-custom-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js', array('jquery'),'1.0', true);
}

    Your script then runs when the page loads.

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 11 months ago

    Thanks for the help bdbrown. I tried doing this.

    added a directory /js in child theme and implemented the code there with javascript file name my-scripts.js

    jQuery(document).ready(function() {
    jQuery('.mycontrol').on('click', function() {
        jQuery(this).find('.mapp-canvas').each(function() {
            var id = jQuery(this).attr('id');
            var map = window[id];
            setTimeout(function() {
                map.resize();
            }, 350);
        });
    });
});

    then in child theme functions.php file, I added

    /* ------------------------------------------------------------------------- *
    Load custom js
/* ------------------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'add_my_scripts');
function add_my_scripts() {
    wp_enqueue_script('my-custom-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js', array('jquery'),'1.0', true);
}

    But unfortunately no luck. Am I missing something?

    Appreciate your help.

    bdbrown

    (@bdbrown)

    9 years, 11 months ago

    I can see that the script is being loaded. Seems like you would need to modify the script to work with the shortcodes ultimate elements being used on your site. I don’t have time at the moment to work on that. My jQuery knowledge isn’t very deep but I might be able to come up with something later. You might also try posting your question on the plugin support forum and see if anyone there can assist:
    https://wordpress.org/support/plugin/mappress-google-maps-for-wordpress

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 11 months ago

    Thank you bdbrown, I tried to consult the plugin author and got this response:

    I don’t see the error – maybe try putting an alert() inside the click handler to see if it ever gets called?

    Still hovering around, how to implement that, let’s see if I get a way to crack this 🙂

    Well, appreciate your help. Thanks a lot.

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 11 months ago

    Just to add to this thread:

    I noticed now that, the moment I click on “inspect” to check the page codes, the map suddenly starts working fine, and as soon as I refresh the page, the problem is again there.

    bdbrown

    (@bdbrown)

    9 years, 10 months ago

    Something else appears to have changed. Nothing happens when I inspect the element. But, now nothing happens when I click the “Reset map” link or the “Map” button. If I click the “Satellite” button I get a partial satellite view in the upper left portion of the tab content.

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 10 months ago

    Yes that’s the thing. It doesn’t work under the tab but working fine when posting as normal.

    Still struggling to figure out the solution. Unfortunately the support forum and the plugin owner doesn’t help much too in this case. 🙁

    Rest all things are good, just the challenge is to show the map under the tab.

    Denzel Chia

    (@denzel_chia)

    9 years, 10 months ago

    Hi,

    Sorry to interrupt.

    Actually you can embed a google map into your content without the use of a plugin.

    https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=en

    Thank you.

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 10 months ago

    That’s a great suggestion Denzel. In fact I tried doing it, but the challenge is that you can’t show various places in one specific city/destination by pin-pointing those specific locations.

    and if you try to show it by directions, it will show blue lines across the map, which doesn’t look good. If any way, I can remove the blue lines and only the names should be highlighted, that might be helpful absolutely.

    For an example you can see the page here.

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 10 months ago

    ah! I found the crack 🙂 Got it solved.

    Thank you Denzel, you just made my life way easier. 🙂

    bdbrown

    (@bdbrown)

    9 years, 10 months ago

    @denzel – Great suggestion. Thanks for the input.

    @raizaduran

    you can’t show various places in one specific city/destination by pin-pointing those specific locations.

    So how did you solve that issue?

    Thread Starter raizaduran

    (@raizaduran)

    9 years, 10 months ago

    Created “My Maps” with sharing access to “Public on the web – Anyone on the Internet” and used the embed code.

    way easier and no extra coding hassle required 🙂

    Denzel Chia

    (@denzel_chia)

    9 years, 10 months ago

    @raizaduran @bdbrown
    You are welcome! 🙂

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘jquery problem with google map’ is closed to new replies.