Databases
StackOverflow2013
Postsdbo
POGoogle Maps API v3, jQuery UI Tabs, map not resizing
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API v3, jQuery UI Tabs, map not resizing
    primarykey
    data
    text
    <p>I am using Google Maps API v3, being displayed on a jQuery UI Tab. I have been struggling with triggering my google map to resize correctly when the tab displaying the map is selected. The jQuery documentation here <a href="http://docs.jquery.com/UI/Tabs" rel="nofollow">http://docs.jquery.com/UI/Tabs</a> provides that:</p> <blockquote> <p>For Google maps you can also resize the map once the tab is displayed like this:</p> <pre><code>$('#example').bind('tabsshow', function(event, ui) { if (ui.panel.id == "map-tab") { resizeMap(); } }); </code></pre> </blockquote> <p>No matter what I try, the above code will not work for me. </p> <p>The following code works insofar as it will display an alert when I select tab 9. For this reason, I know that at least I am correctly isolating the right trigger event. Here is the code:</p> <pre><code>$(function() { $( "#tabs" ).bind( "tabsselect", function(event, ui) { if (ui.panel.id == "tabs-9") { alert("Alert is working"); } }); }); </code></pre> <p>When I alter this code to include the recommended resizeMap(); command, it does not work. Instead, what it does is append the characters "#tabs-9" to the end of the url, and then it does not even select the correct tab 9. I cannot even see tab 9 when I use this code:</p> <pre><code>$(function() { $( "#tabs" ).bind( "tabsselect", function(event, ui) { if (ui.panel.id == "tabs-9") { resizeMap(); } }); }); </code></pre> <p>Finally, when I alter the code to include a different resize command "google.maps.event.trigger(map, 'resize');", it still does not work. Instead, it does allow me to select the correct tab 9, and it does not append the characters to the end of the URL as in the case above, but it will not resize the map. The map still display only partially complete and has gray bands on the right. Here is the code:</p> <pre><code>$(function() { $( "#tabs" ).bind( "tabsselect", function(event, ui) { if (ui.panel.id == "tabs-9") { google.maps.event.trigger(map, 'resize'); } }); }); </code></pre> <p>Any ideas what I can try next? I'm stumped. Thanks.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKara
    1. USDanielAttard
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle Maps API v3, jQuery UI Tabs, map not resizing
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGoogle Maps API v3, jQuery UI Tabs, map not resizing
      1. USFred Yang
      1. VTFavorite
    3. VO
      singulars
      1. POGoogle Maps API v3, jQuery UI Tabs, map not resizing
      1. USAvinash Kumar
      1. VTFavorite
    1. CO`resizeMap()` is for V2. It is never going to work for you.
      singulars
      1. POGoogle Maps API v3, jQuery UI Tabs, map not resizing
      1. USjs1568
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload