markburgasss
New Member
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:\[code\]<%@ 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="http://stackoverflow.com/questions/13781832/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" /> <script src="http://stackoverflow.com/questions/13781832/js/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/13781832/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="http://stackoverflow.com/questions/13781832/#tab-1"><span>One</span></a></li> <li><a href="http://stackoverflow.com/questions/13781832/#tab-2"><span>Two</span></a></li> <li><a href="http://stackoverflow.com/questions/13781832/#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>\[/code\]