Problems with the Google Maps API v3 + jQuery APIs

Question

Problems with the Google Maps API v3 + jQuery APIs

There are a number of issues that seem to be fairly well known when using the Google Maps API to display a map in a jQuery user interface tab. I saw that questions about similar problems have been published ( here and here ), but the solutions there seem to work only for the v2 Maps API. The other links I checked here and here , along with pretty much everything I could dig through googling.

I am trying to map ( using v3 API ) to a jQuery tab with mixed results. I use the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, I don’t know about Maps).

This is markup and javascript:

<body> <div id="dashtabs"> <span class="logout"> <a href="go away">Log out</a> </span> <!-- tabs --> <ul class="dashtabNavigation"> <li><a href="#first_tab" >First</a></li> <li><a href="#second_tab" >Second</a></li> <li><a href="#map_tab" >Map</a></li> </ul> <!-- tab containers --> <div id="first_tab">This is my first tab</div> <div id="second_tab">This is my second tab</div> <div id="map_tab"> <div id="map_canvas"></div> </div> </div> </body>

and

 $(document).ready(function() { var map = null; $('#dashtabs').tabs(); $('#dashtabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == 'map_tab' && !map) { map = initializeMap(); google.maps.event.trigger(map, 'resize'); } }); }); function initializeMap() { // Just some canned map for now var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map($('#map_canvas')[0], myOptions); } 150.644); $(document).ready(function() { var map = null; $('#dashtabs').tabs(); $('#dashtabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == 'map_tab' && !map) { map = initializeMap(); google.maps.event.trigger(map, 'resize'); } }); }); function initializeMap() { // Just some canned map for now var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map($('#map_canvas')[0], myOptions); }

And here is what I found that does / does not work (for Maps API v3):

The use of off-left, as described in the documentation jQuery UI Tabs (and two related question I answer) does not work at all. In fact, the most efficient code using the CSS .ui-tabs .ui-tabs-hide { display: none; } .ui-tabs .ui-tabs-hide { display: none; } instead.
The only way to get a map displayed on the tab - is set the width and height of the CSS #map_canvas as absolute values. Changing the width and height to auto or 100% causes the map to not display at all, even if it has already been successfully displayed (using absolute width and height).
I could not find it documented outside the Maps API, but map.checkResize() will no longer work. Instead, you need to run a resize event, triggering google.maps.event.trigger(map, 'resize') .
If the map is not initialized inside the function associated with the tabsshow event, the map itself is displayed correctly, but the controls are not - most of them are simply missing.

So here are my questions:

Does anyone else have experience with the same skill? If so, how do you find that in fact will work as documented tricks do not work for Maps API v3?
How about loading tab content with Ajax in accordance with the jQuery the UI the docs ? I have not had a chance to play with him, but I guess that it will break even more cards. What are the chances of making it work (or is it not worth trying)?
How to make a map fill the maximum possible area? I would like for him to fill out a tab and adapt to resizing the page, mainly the way it was done on maps.google.com. But, as I said, I seem to be stuck in applying only the absolute width and height of the CSS to the div map.

Sorry if this was long, but it may be the only documentation tabs Maps API v3 + jQuery. Hurrah!

+70

jquery google-maps google-maps api-3- jquery-ui-tabs

Matt Ball Sep 15 '09 at 16:21

source share

17 answers

Anon · Answer 1 · 2010-10-15 22:42

Note: this answer received incorrect third-party editing, which essentially replaced its contents, which a third-party editor should not do. However, the result may be more useful than the original, so both versions are now listed below:

Original copyrighted version of Anon since 2010, after one editing of Anon
google.maps.event.trigger (map, 'resize'); map.setZoom (map.getZoom ());

suggested http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 as v3 replace v2 checkResize ().

Blech is a bad Google, not a cookie.

User Eugeniusz Fizdejko rewrites the 2012 form:

For me it works when adding a marker:

 var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" }); google.maps.event.addListener(map, "idle", function(){ marker.setMap(map); }); function () { var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" }); google.maps.event.addListener(map, "idle", function(){ marker.setMap(map); });

jeffkee · Answer 2 · 2010-06-18 01:50

Gather your answer above. There is an answer on the jQueryUI website, and here it is:

Why...
... my slider, google map, sIFR, etc. doesn't work when placed in a hidden (inactive) tab?
Any component that requires dimensional calculation to initialize it will not work in a hidden tab, since the tab bar itself is hidden using the display: no, so any elements inside do not report the actual width and height (0 in most browsers).
There is an easy workaround. Use the left technique to hide inactive tab bars. For example. in your style sheet replace the rule for the class selector ".ui-tabs.ui-tabs-hide" with

 .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }

For Google maps, you can also resize the map as soon as a tab is displayed like this:

 $('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } }); bind ( 'tabsshow', function (event, ui) { $('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } });

resizeMap () will call checkResize () Google Maps on a specific map.

memberyh · Answer 3 · 2010-08-13 04:20

Just override the css class for the hidden tab:

 .ui-tabs .ui-tabs-hide { position: absolute !important; left: -10000px !important; display:block !important; }

jayarjo · Answer 4 · 2012-05-28 19:41

This is what you can do for Google Maps v3:

 google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); map.setCenter(point); // be sure to reset the map center as well });

Keyo · Answer 5

I load maps after the tab is displayed.

This is a hack, but it worked for me. Just save the iframe map URL inside the rel iframes attribute, for example:

 <iframe width="490" height="300" rel="http://maps.google.com/maps?f=q&amp;source=s..."></iframe>

This event will set the iframe src attribute to the url inside rel.

  $("#tabs").tabs({ show:function(event, ui) { var rel = $(ui.panel).find('iframe').attr('rel'); $(ui.panel).find('iframe').attr('src',rel); } }); tabs ({  $("#tabs").tabs({ show:function(event, ui) { var rel = $(ui.panel).find('iframe').attr('rel'); $(ui.panel).find('iframe').attr('src',rel); } }); ') attr ( 'src', rel).;  $("#tabs").tabs({ show:function(event, ui) { var rel = $(ui.panel).find('iframe').attr('rel'); $(ui.panel).find('iframe').attr('src',rel); } });

paul · Answer 6 · 2012-06-04 23:01

This does not answer all your questions, but I got his job, and all the other answers miss one thing: when you redraw the map with the "resize" event, you will lose the place where the map was in the center. Therefore, you also need to update the center of the map with setCenter if your map is focused on the position.

In addition, you do not want to initialize the card each time you start a tab, because it is inefficient and can lead to additional geocodes. Firstly, you need to maintain its centered position, which can be static lat / long or geocoding, might look something like this:

 var address = "21 Jump St, New York, NY"; var geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var center; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { center = results[0].geometry.location; map.setCenter(center); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } });

Then

 $("#tabs").tabs(); $('#tabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == "mapTab") { google.maps.event.trigger(map, "resize"); map.setCenter(center); // Important to add this! } }); bind ( 'tabsshow', function (event, ui) { $("#tabs").tabs(); $('#tabs').bind('tabsshow', function(event, ui) { if (ui.panel.id == "mapTab") { google.maps.event.trigger(map, "resize"); map.setCenter(center); // Important to add this! } });

Where "mapTab" is the identifier of your mapTab, and "map" is the var name for your map object.

Vaughn · Answer 7 · 2010-03-24 12:17

Make sure that the code that initializes your card, called BEFORE FRIFPETOM that initializes your tabs.

The only troubles I experienced were that clicking on the map tab caused the browser to go to focus on the map, and that it broke out of the default border that jQuery places around the container of main tabs. I added a return false onclick call on map tab tag for processing the first and easily the size of the border: 0 on the main tabs div for processing the second.

It all worked for me.

Good luck

Dave · Answer 8 · 2009-12-01 19:40

I went through every forum that was looking for the answer to this question ... everyone was talking to use

map.checkResize()

solution .... nothing worked ... then I ... why not initialize the tab when the tab is shown, so I used this

 $("#servicesSlider ").tabs({ //event: 'mouseover' fx: { height: 'toggle', opacity: 'toggle'}, show: function(event, ui) { if (ui.panel.id == "service5") { $(ui.panel).css("height","100%") initialize() }} });

"service5" is the id of my tab that contains my google v3 map.

Hope this works for you!

Andy · Answer 9 · 2010-03-19 16:04

I also had this problem, I downloaded maps through AJAX.

It seems that a problem related to the percentage that the panel has no fixed size (one that contains the loaded markup).

Using the following code to create tabs helped me:

 $("#mainTabs").tabs({'show': function(event, ui){ $(ui.panel).attr('style', 'width:100%;height:100%;'); return true; }}); ', 'width: $("#mainTabs").tabs({'show': function(event, ui){ $(ui.panel).attr('style', 'width:100%;height:100%;'); return true; }});

Andrés Sepúlveda · Answer 10 · 2010-07-03 12:40

Hi guys, this code fixes the error, but it doesn’t work in IE. After searching and searching, I found that we should add the following line, and everything works to perfection:

 < !--[if IE]> < style type="text/css"> .ui-tabs .ui-tabs-hide { position: relative; } < /style> < ![endif]-->

Juan arce · Answer 11 · 2010-01-21 17:54

You may call

map.fitBounds (borders)

who will do the update

Tom Gordon · Answer 12 · 2010-11-18 00:32

A very annoying problem, but with a little hack it is fixed. The key is that the relative #tabs position was adjusted to the outer edge of each of the tabs when you select a new one. Here is how I did it:

 $('#tabs').tabs({ selected:0, 'select': function(event, ui) { //this is the href of the tab you're selecting var currentTab = $(ui.tab).attr('href'); //this is the height of the related tab plus a figure on the end to account for padding... var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40; //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID $('#tabs').css('height', currentInner); } }); ui) { $('#tabs').tabs({ selected:0, 'select': function(event, ui) { //this is the href of the tab you're selecting var currentTab = $(ui.tab).attr('href'); //this is the height of the related tab plus a figure on the end to account for padding... var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40; //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID $('#tabs').css('height', currentInner); } }); ( 'href'); $('#tabs').tabs({ selected:0, 'select': function(event, ui) { //this is the href of the tab you're selecting var currentTab = $(ui.tab).attr('href'); //this is the height of the related tab plus a figure on the end to account for padding... var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40; //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID $('#tabs').css('height', currentInner); } }); current tab you're selecting to the entire position: relative #tabs ID $('#tabs').tabs({ selected:0, 'select': function(event, ui) { //this is the href of the tab you're selecting var currentTab = $(ui.tab).attr('href'); //this is the height of the related tab plus a figure on the end to account for padding... var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40; //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID $('#tabs').css('height', currentInner); } });

it uses css i:

 #tabs { position: relative; } /*set the width here to whatever your column width is*/ .ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;} .ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute; left:-99999em; top:-9999em}

keithxm23 · Answer 13 · 2012-09-04 19:28

I easily accomplished this task by loading the API asynchronously , and then simply calling loadScript from the <a> tag associated with the corresponding tab from the onclick event:

 <li><a href="#tab3" onclick="loadScript();">Maps</a></li>

arjang27 · Answer 14 · 2013-07-16 02:27

I had the same problem and none of the answers worked for me. Perhaps I did not know how to use them in my code, so I added the onclick event to the tab menu to initialize the Google map, and it works. I do not know if this is really good practice.

 jQuery(document).ready(function($) { $( '#tabs' ).tabs(); var href = $('#tabs').find('a[href="#tabs-4"]'); (href).on('click',function(){ initialize(); })}); var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); } <div id="tabs-4"> <div id="map" style="width:580px;height:380px;"> </div> </div> = "width: 580px; height: 380px;"> jQuery(document).ready(function($) { $( '#tabs' ).tabs(); var href = $('#tabs').find('a[href="#tabs-4"]'); (href).on('click',function(){ initialize(); })}); var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); } <div id="tabs-4"> <div id="map" style="width:580px;height:380px;"> </div> </div>

Wernight · Answer 15 · 2013-11-15 11:51

Another solution for Maps API v3 (exp) and jQuery UI 1.10:

 var pano = new google.maps.StreetViewPanorama(...); $('#tabs').tabs({ 'activate': function(event, ui) { if (ui.newPanel[0].id == "maps-tabs-id") { pano.setVisible(true); } } }); ui) { var pano = new google.maps.StreetViewPanorama(...); $('#tabs').tabs({ 'activate': function(event, ui) { if (ui.newPanel[0].id == "maps-tabs-id") { pano.setVisible(true); } } }); id") { var pano = new google.maps.StreetViewPanorama(...); $('#tabs').tabs({ 'activate': function(event, ui) { if (ui.newPanel[0].id == "maps-tabs-id") { pano.setVisible(true); } } });

yehanny · Answer 16 · 2015-01-30 05:07

I did what Kate says and it works for me, in my case I use jQuery waypoints for my tabbed navigation to better understand the code I used here:

In HEAD

 <head> <!-- Google Maps --> <script> function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script> </head> 'map_canvas'), <head> <!-- Google Maps --> <script> function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script> </head>

Inside my tabs:

 <li><a href="#MyMap" onclick="loadScript();">My Map</a></li>

Then in div

 <div id="map_canvas"></div>

Hope this helps someone, thank you all!

Moxet Khan · Answer 17 · 2015-12-20 15:22

I encountered the same problem in Semantic UI , the problem was corrected when calling the function init(); when loading a tab or you can also link it.

Problems with the Google Maps API v3 + jQuery APIs

More articles: