Question

I’m trying to put a google map within a jqueryui tab. The map shows up; however, the full map itself does not fill its canvas. Additionally, trying to scroll the map makes it jumpy. Does anyone have any ideas? Here is the code I’m using:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="TabsExample.aspx.cs" Inherits="TabsExample" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
    <link href="css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3RgCHRyhBj2Ou01h_MwJrG2uITC4pv1E&sensor=false">
    </script>
    <script type="text/javascript">
      $(document).ready(function()
      {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="TopNavigationContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="RightColumnContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="MainContent" Runat="Server">
  <div id="tabs" style="min-height: 500px;">
    <ul>
      <li><a href="#tab-1"><span>One</span></a></li>
      <li><a href="#tab-2"><span>Two</span></a></li>
      <li><a href="#APSU-tab"><span>Three</span></a></li>
    </ul>
    <div id="tab-1">
      Tab 1's Content
    </div>
    <div id="tab-2">
      Tab 2's Content
    </div>
    <div id="APSU-tab">
      <div id="map_canvas" style="width:300px; height:300px;"></div>
    </div>
  </div>
  <script type="text/javascript">
    $("#tabs").tabs();
  </script>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="FooterContent" Runat="Server">
</asp:Content>

Answer 1

This is a known issue. The solution is to load the map dynamically when you reveal the tab. Here is a generic solution that is very straightforward. When you load the specific tab, check for map’s existence and load if needed.

$(document).ready(function() {

    function my_tab_reveal() {  // or whatever function you use for showing your tabs content
        // whatever your code for revealing tab content is here

        if (!loaded) {  // this checks to see if the map is not already loaded
            load(); // this loads the map
        }
    }

    var loaded = false;
    load = function() {
        // your google maps JavaScript code goes here

        // checks tiles to see if map has loaded
        google.maps.event.addListener(map, "tilesloaded", function() {
            loaded = true;
        });
    }

});

---

EDIT:

As per jQuery UI documentation, there’s a callback function you can use when the tab is activated.

“Triggered after a tab has been activated (after animation completes).”

$(document).ready(function() {

    $("#tabs").on( "tabsactivate", function( event, ui ) {
        $("#map_canvas").each(function() {
            if (!loaded) {  // this checks to see if the map is not already loaded
                load(); // this loads the map
            } 
        });
    });

    var loaded = false;
    load = function() {
        // your google maps JavaScript code goes here
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // checks tiles to see if map has loaded
        google.maps.event.addListener(map, "tilesloaded", function() {
            loaded = true;
        });
    }

});