Google maps not working in jQuery bookmarks

Question

Google Maps that do not work when placed on jQuery tabs is an issue that exists across the web. In my research, none of the solutions work yet. Hope someone here can help ...

This is a screenshot of the error in Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61. http://www.flickr.com/photos/75523633@N04/6932970713/

The error is missing in IE8 and intermittent in 9. In Firefox, it disappears when you open FireBug.

The site is in Wordpress 3.3.1, and the map is created / retrieved through the plugin. It doesn't seem to matter which map plugins I use; the error remains the same. Based on my research, this problem is a js / jQuery problem between tabs and the javascript Google Map API, not a Wordpress / plugin problem.

Here is my code. Right now, I'm using the wp-gmappity-easy-google-maps plugin for maps, but I also tried the full-google-map plugin. Both work fine behind tabs.

HTML:

// Header calls: <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script> // HTML Body: <div class="tabs_framed_container"> <ul class="tabs_framed"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> <li><a href="#">Map Tab</a></li> <li><a href="#">Tab 3</a></li> </ul> <div class="tabs_framed_content"> <h2>Tab 1 Content</h2> <!-- Some Content --> </div> <div class="tabs_framed_content"> <h2>Tab 2 Content</h2> <!-- Some Content --> </div> <h2>Tab 3 Content</h2> <!-- Some Content --> </div> <div class="tabs_framed_content"> <div class="map_container"> <div style="width:900px;margin-left:auto;margin-right:auto;"> <div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"></div> </div> <script type="text/javascript"> function wpgmappity_maps_loaded1() { var latlng = new google.maps.LatLng(42.4005322,-71.2750094); var options = { center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl : true, zoomControlOptions : { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.TOP_LEFT }, mapTypeControl : true, mapTypeControlOptions : { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_RIGHT }, scaleControl : true, scaleControlOptions : { position: google.maps.ControlPosition.TOP_LEFT }, streetViewControl : true, streetViewControlOptions : { position: google.maps.ControlPosition.TOP_LEFT }, panControl : false, zoom : 14 }; var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options); var point0 = new google.maps.LatLng(42.4005322,-71.2750093); var marker1_0 = new google.maps.Marker({ icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png', position : point0, map : wpgmappitymap1 }); } jQuery(window).load(function() { wpgmappity_maps_loaded1(); }); </script> </div> </div> <div class="tabs_framed_content"> <h2>Tab 2 Content</h2> <!-- Some Content --> </div> 

Here is the relevant CSS:

 .tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;} .tabs_framed_container{margin-bottom:40px;} .tabs_framed a{ display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px; font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777; opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; } .tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;} .tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;} .tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;} .tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;} div.wpgmappity_container img { background-position: 0% 0%; background-color: none !important; max-width: none !important; background-image: none !important; background-repeat: repeat !important; background-attachment: scroll !important; } 

Here is the link to the file that controls my tabs: http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js

flowplayer.org/tools/forum/25/79274 is one of the solutions I found (scroll down). However, checkResize and resizeMap no longer work (see api Link to code.google.com/apis/maps/documentation/javascript/reference.html#Map, scroll down a little to "Events" and find google.maps.event. Trigger ( map, 'resize'), which is apparently the replacement code). www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps is another old entry.

I saw this suggestion:

 jQuery(document).ready(function(){ jQuery('.tabs_container').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { google.maps.event.trigger(map, 'resize'); } }); }); 

but I have no idea how to implement it (tried several methods without success), or if it even worked.

From all my research, it seems that you need to trigger a map resize event when a tab containing a map is selected. So far, I have not been able to adapt any solutions there, especially because I am familiar with js / jQuery. It looks like someone familiar with js or jQuery can solve this.

Please help me.

Answer 1

I abandoned the plugins and went with the short Google Maps code that was released for the theme that I am using. While I am losing the functionality of custom tokens, theme developers were finally able to help get it all. They added the following code to the PHP short code file.

 jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) { resizeMap(" . 'map'.$map_id .") }); function resizeMap(m) { x = m.getZoom(); c = m.getCenter(); google.maps.event.trigger(m, 'resize'); m.setZoom(x); m.setCenter(c); }; 

This code starts a reboot of the card when the tab containing the card is clicked. It also lights up the map. This solution solved the problem for me, and now google maps are displayed on jquery tabs. We hope that some of the more advanced javascript users here (and plugin developers !!!) can adapt this solution to their own tabbed map problems.

Answer 2

rogercut answered me where I need to be. I use Bootstrap tabs nested and cannot get map for update.

When I click on tab group 2 (# tg2), the map tab is displayed. I also needed to start resizing if someone clicked the second level tab (# tab1) from tab group 2.

The click handler works, but the problem is that when you click the tab is still hidden ... By setting a slight delay, it gives time to display the tab before it is resized.

 // Create Map var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(48.8582, 2.2945), //I see Paris, I see France mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } //Bind click handlers - Here the important part $('a[href=#tab1], a[href=#tg2]').on('click', function() { setTimeout(function(){ google.maps.event.trigger(map, 'resize'); }, 50); }); 

So we tell the browser to wait 50 ms after clicking to resize. In my testing, 50 ms was enough time to display the tab, but short enough so that it was not noticeable to the user. In fact, my testing worked with a delay of only 1 ms on 4-5 machines on which I tested it - even on a slow laptop with a dog, which we were sitting in a warehouse. 50 ms is just safe.

Hope this helps someone else.

Answer 3

When developing a website that included the contents of a map tab, I ran into the same problem. Website http://samet.com.ar (in Spanish, click the map icon or the ubicacion link). The same error you are talking about occurred every time a div tab loaded with the others in its tab group. I found out that if I manage to give it some time to load after the other tabs have done, then there would be no problem.

I could allow this to be done, because in any case, I gave about 3.5 seconds for the wrapper to appear in order to load all the background photos, and the map is in an invisible tab during loading, so I do not need it to appear immediately.

Then the map tab is loaded as a callback function immediately after the completion of the entire wrapper. If you are viewing a page, find the container-container identifier. Inside the "panels" you will find the div file loaded at the end.

The corresponding jQuery code that I use on the index.php page is as follows:

 <script type='text/javascript'> ( function( $ ) { // for SOF post --- previous code deleted --- $( "#wrapper" ).delay( 3500 ).fadeIn( "slow",function() { // Animation complete <?php $post_map = get_posts('name=map');?> $( "#map" ).delay( 1000 ).append( <?php echo "'".$post_map[0]->post_content."'"; ?> ); } ); } )( jQuery ); </script> 

Hope this helps. I forgot to mention that the card code is embedded as content in a specific record. (BTW, the map marker is located in the upper right corner to show the main access roads.)

Hurrah!

Answer 4

The problem (as mentioned above and elsewhere) is that the display of the div must be visible to work. So load the map into a visible tab. Then, if you want, go to the tab that you want to display.

To do this, I added a one-time event listener to the card. Inside this function, I switched to the first tab. During loading, you see the map area for about a second before the tab is resized. The advantage is that the user has nothing to do to make it work.

 google.maps.event.addListenerOnce(map, 'tilesloaded', function() { $("#Tabs").tabs('select',0); }); 

Answer 5

None of the above answers are completely correct. The problem arises because the map canvas is set to width: 0; height: 0 by default before loading, and then expects you to either pass the dimension or get dimensions from the parent, as this is inside the jQuery tabs there are no sizes.

As mentioned above, bind to the click event on the tab and set the map_canvas dimension, then call google.maps.event.trigger ()

  $(function(){ $('#maptab').bind('click',function() { var w = $('#map_view').width(); var h = $('#map_view').height(); $('#map_canvas').css({ width: w, height: h }); google.maps.event.trigger(map, 'resize'); }); }); 

Answer 6

Before I have the same problem for implementing google-map inside tabs, especially when the map is not in the first selection. But I tried and works with a simple solution like this:

Make a simple js function:

 <script type="text/javascript"> function ResetMap() { google.maps.event.trigger(map, 'resize'); } </script> <li><a href="#tab1">Select Tab1</a></li> <li onClick="ResetMap();"><a href="#tab2">Select Google Map</a></li> <div class="tab1-content" id="tab1">Content tab1</div> <div class="tab2-content" id="tab2"><?php include_once ('google-map.php') ?></div> 

Answer 7

I solved this for the bootstrap Tab. It is just a matter of calling the map resizing function immediately after the map container is displayed.

I added the following side to the initialize () function:

 jQuery('.nav-tabs a[href="#my-map"]').on('shown.bs.tab', function(){ google.maps.event.trigger(map, 'resize'); map.setZoom(15); //You need to reset zoom map.setCenter(myLatlng); //You need to reset the center }); 

Answer 8

This may not work for everyone! One solution that worked for me was to display hidden tabs, but somewhere "not visible" to the user. This will allow the map to be displayed even if it is not on the first / active tab. Find a way to target hidden tabs ONLY:

 .tab-hidden{ position: absolute !important; left: -10000px !important; /* maybe not that much */ display:block !important; width:100% !important; /* I found this to be very important*/ } 

Card width is 100%, not a fixed width.

Answer 9

Try:

Edit

 <li><a href="#">Map Tab</a></li> 

to

 <li><a href="#" id="maptab">Map Tab</a></li> 

Then add this javascript

 $(document).ready(function(){ $('#maptab').bind('onClick', function() { google.maps.event.trigger(map, 'resize'); }); }); 

In the script tag at the top of the page. What this should do for you:

By adding the id attribute to the tab link, you explicitly indicate the map there. Then you listen to the onClick event provided by the jQuery tab library, which fires when a tab is selected that triggers a recalibration of the map.

Answer 10

The problem is simple. Cards should be displayed in a dimensioned element. If you use a tab system that hides the contents of a tab, all elements within the contents of the tab have no dimensions while the parent is hidden. If jQuery css tools allow this, set the hidden content off-screen, not the hidden.

To use: google.maps.event.trigger (map, 'resize');

You need access to the intitial map object variable, which is "var wpgmappitymap1", but is inside the map initialization function. If you make a global variable, you can put it in a resize trigger

  google.maps.event.trigger(wpgmappitymap1, 'resize'); 

Answer 11

I had the same problem and here is my solution.

I added the ajaxComplete function, which runs when all ajax requests or messages are complete.

 <script type="text/javascript"> $(document).ajaxComplete(function(e){ calculateRoute("from","to"); }); </script> 

Answer 12

Its work for me, meets my requirement, and you can use it as a reference:

 <script type="text/javascript"> function setCookie (name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } function getCookie (name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset); if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } if (setStr == 'false') { setStr = false; } if (setStr == 'true') { setStr = true; } if (setStr == 'null') { setStr = null; } return(setStr); } function hidePopup() { setCookie('popup_state', false); document.getElementById('popup').style.display = 'none'; document.getElementById('hiding').style.display = 'block'; google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); } function showPopup() { setCookie('popup_state', null); document.getElementById('popup').style.display = 'block'; document.getElementById('hideup').style.display = 'none'; google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); } function checkPopup() { if (getCookie('popup_state') == null) { // if popup was not closed document.getElementById('popup').style.display = 'block'; document.getElementById('hiding').style.display = 'block'; google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); } } </script> <body onload="checkPopup();"> <div class="map-button" id="hiding"><a href="#" onclick="showPopup(); return false;"><img src="images/map_magnify.png" alt="" title="Show Google Map" ></a></div> <div class="map-button" id="popup" style="display:none"> <a href="#" onclick="hidePopup(); return false;"><img src="images/map_delete.png" alt="" title="Hide Google Map" ></a> <div id="gmap"></div> </div> </body> 

Note. You can make a CSS map-button button to position the button as needed. Put your own buttom image. Replace id = "gmap" as yours. Hope this helps you.

Answer 13

Try this in css:

 .tab-content > .tab-pane:not(.active), .pill-content > .pill-pane:not(.active) { display: block; height: 0; overflow-y: hidden; }