How to resolve Google Maps Javascript conflict with WordPress admin Javascript

3 Views

I have this webshop that is currently deployed, and it is based on WordPress. I have added a functionality where-in if the administrator types in the address, the Map will be shown. So far so good, things are doing great.

However, I noticed that whenever I add this:

Read More
wp_enqueue_script('googlemap', 'http://maps.google.com/maps/api/js?sensor=false', array(), false, true);

which obviously is the Google Map js, the drag and drop functionality of the WordPress Admin (most obviously the Widget area) doesn’t work. I tried commenting this line, and voila, drag and drop of widgets is back, but of course no Google Maps.

Have you encountered this as well? How did you go about this? Currently I am operating my admin page via the non-javascript version of Widgets. Workable, but not ideal.

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. This may help you as it’s just fixed my issue.

    I’ve loading google maps same as you but in my own js file I have:

    if($('#gmap').length != 0){
    initialize();
}

    That way it isn’t loaded on pages without a #gmap element

  2. Try: 

    if (!is_admin()) {
wp_enqueue_script('googlemap', 'http://maps.google.com/maps/api/js?sensor=false', array(), false, true);
}

    Edit: Please comment if this is being used in the admin panel and I’ll find a workaround; the above code only queues the googlemap script in the frontend.

  3. You can control with extreme precision the page of the admin panel where a script must be loaded. The first think you have to consider is that: if the DOM element is not found, the maps API generate the error “a is undefined”. So you must load the API in the right page of the admin panel.

    I use the following script to load the GMaps API in a specific custom post type edit screen:

    add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts' );
function my_admin_enqueue_scripts( $hook ) {
  if( ('my_custom_post_type' != get_post_type()) || ('edit.php' == $hook) )
    return;
  // enqueue GMaps API
  wp_enqueue_script('google-maps-api', 'http://maps.googleapis.com/maps/api/js?sensor=false' );
}
    1. The action hook admin_enqueue_scripts fires just when WP loads the scripts of the admin panel.
    2. The argument $hook identifies the current file.
    3. my_custom_post_type is … the custom post type that needs the google map. Of course it could be ‘post’ or ‘page’ as well. So, the code above doesn’t allow the API to be loaded in pages and posts admin panels.
    4. $hook identifies the file edit.php, that is the file that generates the list of posts (or pages, or custom post types). So, if the current page is a list and not a ‘new post’ or ‘edit post’ panel, the script is interrupted.
    5. The last chance is a ‘new’ or ‘edit’ panel of the post type you specified above. Only there the maps API will be loaded
    6. Don’t forget the custom meta box that will hold the map’s DOM element