Databases
StackOverflow2013
Postsdbo
POAssistance needed - Map does not load properly in JQuery UI Tabs - NOT A DUPLICATE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAssistance needed - Map does not load properly in JQuery UI Tabs - NOT A DUPLICATE
    primarykey
    data
    text
    <p><strong>None of the "Answers" from the other post resolve my issue. Please Read My Post and Attempt to guide me in the right direction</strong></p> <p><strong><em>EDIT - EDIT - EDIT</em></strong></p> <p><strong><em>I have updated the java script to include the recommended function</em></strong></p> <p><strong><em>I have included the HTML here for those who do not like jsfiddle</em></strong></p> <p>I have read tons of questions and answers here and I cannot get my Google Map to load properly in the JQueryUI Tab that it is called in.</p> <p>I understand that the map must load first but I am not able to get the Tab to load then return to the Home tab. I have tried the Off Left Technique to no avail.</p> <p>I need help. A fresh set of Eyes would be extremely Helpful.</p> <p>Any help would be greatly appreciated as I am extremely far behind on this project.</p> <p>Please review the jsfiddle referenced below, and tell me where I am going wrong. I am at my whits end and really could use a little intervention with this. One of you Java/jqueryui Guru's surely can see where i am going wrong with a quick little peak.</p> <p>The issue is on the <strong><em>LOCATION</em></strong> Tab</p> <p>The jsfiddle - <a href="http://jsfiddle.net/hughesjoseph/hNKPY/" rel="nofollow">http://jsfiddle.net/hughesjoseph/hNKPY/</a></p> <p>The test site <a href="http://l2technotes.dyndns.org" rel="nofollow">http://l2technotes.dyndns.org</a></p> <p>Loads correctly if you go to address/#tabs-4</p> <p><strong>Complete Java Script</strong></p> <pre><code> (function (mapDemo, $, undefined) { mapDemo.Directions = (function () { function _Directions() { var map, directionsService, directionsDisplay, autoSrc, autoDest, pinA, pinB, markerA = new google.maps.MarkerImage('images/car.png'), markerB = new google.maps.MarkerImage('images/gmaplogo.png'), // Caching the Selectors $Selectors = { mapCanvas: jQuery('#mapCanvas')[0], dirPanel: jQuery('#directionsPanel'), dirInputs: jQuery('.directionInputs'), dirSrc: jQuery('#dirSource'), dirDst: jQuery('#dirDestination'), getDirBtn: jQuery('#getDirections'), dirSteps: jQuery('#directionSteps'), paneToggle: jQuery('#paneToggle'), useGPSBtn: jQuery('#useGPS'), paneResetBtn: jQuery('#paneReset') }, autoCompleteSetup = function () { autoSrc = new google.maps.places.Autocomplete($Selectors.dirSrc[0]); autoDest = new google.maps.places.Autocomplete($Selectors.dirDst[0]); }, // autoCompleteSetup Ends directionsSetup = function () { directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true }); directionsDisplay.setPanel($Selectors.dirSteps[0]); }, // direstionsSetup Ends trafficSetup = function () { // Creating a Custom Control and appending it to the map var controlDiv = document.createElement('div'), controlUI = document.createElement('div'), trafficLayer = new google.maps.TrafficLayer(); jQuery(controlDiv).addClass('gmap-control-container').addClass('gmnoprint'); jQuery(controlUI).text('Traffic').addClass('gmap-control'); jQuery(controlDiv).append(controlUI); // Traffic Btn Click Event google.maps.event.addDomListener(controlUI, 'click', function () { if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) { jQuery(controlUI).addClass('gmap-control-active'); trafficLayer.setMap(map); } else { trafficLayer.setMap(null); jQuery(controlUI).removeClass('gmap-control-active'); } }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv); }, // trafficSetup Ends mapSetup = function () { map = new google.maps.Map($Selectors.mapCanvas, { zoom: 16, center: new google.maps.LatLng(32.565243, -97.130531), mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT, position: google.maps.ControlPosition.TOP_RIGHT }, panControl: true, panControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.RIGHT_TOP }, scaleControl: true, streetViewControl: true, overviewMapControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(32.565243, -97.130531), map: map, icon: markerB }); autoCompleteSetup(); directionsSetup(); trafficSetup(); }, // mapSetup Ends directionsRender = function (source, destination) { $Selectors.dirSteps.find('.msg').hide(); directionsDisplay.setMap(map); var request = { origin: source, destination: destination, provideRouteAlternatives: false, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var _route = response.routes[0].legs[0]; pinA = new google.maps.Marker({ position: _route.start_location, map: map, icon: markerA }); } }); }, // directionsRender Ends fetchAddress = function (p) { var Position = new google.maps.LatLng(p.coords.latitude, p.coords.longitude), Locater = new google.maps.Geocoder(); Locater.geocode({ 'latLng': Position }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var _r = results[0]; $Selectors.dirSrc.val(_r.formatted_address); } }); }, // fetchAddress Ends invokeEvents = function () { // Get Directions $Selectors.getDirBtn.on('click', function (e) { e.preventDefault(); var src = $Selectors.dirSrc.val(), dst = $Selectors.dirDst.val(); directionsRender(src, dst); }); // Reset Btn $Selectors.paneResetBtn.on('click', function (e) { $Selectors.dirSteps.html(''); $Selectors.dirSrc.val(''); $Selectors.dirDst.val(''); if (pinA) pinA.setMap(null); if (pinB) pinB.setMap(null); directionsDisplay.setMap(null); }); // Toggle Btn $Selectors.paneToggle.toggle(function (e) { $Selectors.dirPanel.animate({ 'left': '-=305px' }); jQuery(this).html('&amp;gt;'); }, function () { $Selectors.dirPanel.animate({ 'left': '+=305px' }); jQuery(this).html('&amp;lt;'); }); // Use My Location / Geo Location Btn $Selectors.useGPSBtn.on('click', function (e) { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { fetchAddress(position); }); } }); }, //invokeEvents Ends _init = function () { mapSetup(); invokeEvents(); }; // _init Ends this.init = function () { _init(); return this; // Refers to: mapDemo.Directions }; return this.init(); // Refers to: mapDemo.Directions.init() } // _Directions Ends return new _Directions(); // Creating a new object of _Directions rather than a function } ()); // mapDemo.Directions Ends })(window.mapDemo = window.mapDemo || {}, jQuery); var mapFirstClick = false; $("#maptab").click(function () { mapFirstClick || setTimeout(function () { google.maps.event.trigger(map, 'resize'); mapFirstClick = true; map.setCenter(32.565243, -97.130531); }, 250); }); function PrintElem(elem) { Popup($(elem).html()); } function Popup(data) { var mywindow = window.open('', 'my div', 'height=600,width=800'); mywindow.document.write('&lt;html&gt;&lt;head&gt;&lt;title&gt;Driving Directions to Electrolysis by Bridgett&lt;/title&gt;'); mywindow.document.write('&lt;/head&gt;&lt;body &gt;'); mywindow.document.write(data); mywindow.document.write('&lt;/body&gt;&lt;/html&gt;'); mywindow.print(); mywindow.close(); return true; } $(function () { $("#tabs").tabs(); }); $(function () { $("#accordion").accordion({ collapsible: true, active: false, heightStyle: "content" }); }); </code></pre> <p><strong>Pertinent HTML</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Electrolysis by Bridgett&lt;/title&gt; &lt;!-- Favorite Icon --&gt; &lt;link rel="shortcut icon" href="images/beLogoColor3D.png" /&gt; &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body onload: "#maptab";&gt; &lt;div id="tabs"&gt; &lt;ul style="border:3px solid green"&gt; &lt;li class="myMenu"&gt;&lt;a href="#tabs-4" onclick="maptab"&gt;&lt;img height="20px" src="images/map.png" alt="" class="img center" /&gt; Location&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-4"&gt; &lt;div class="myDirections" style="width:19%;"&gt; &lt;div&gt; &lt;form&gt; &lt;p&gt; &lt;label class="mytxt"&gt;Driving From :&lt;/label&gt; &lt;br /&gt; &lt;input type="text" value="" id="dirSource" style="width:98%;" /&gt; &lt;/p&gt; &lt;input type="hidden" value="1003 E. Broad St., 76063" id="dirDestination" /&gt; &lt;div class="mybutton"&gt;&lt;a href="#getDirections" id="getDirections"&gt;Get Directions to&lt;br /&gt;Electrolysis by Bridgett&lt;/a&gt; &lt;/div&gt; &lt;center&gt; &lt;input type="button" value="Print Directions" onclick="PrintElem('#directionSteps')" /&gt; &lt;/center&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="directionSteps"&gt; &lt;center&gt; &lt;p class="msg"&gt;Step by Step Directions Appear Here&lt;/p&gt; &lt;/center&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="myMap" style="width:78%;"&gt; &lt;div id="mapCanvas" style="width:100%;height:550px"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery-1.9.0.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/sample.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBenjamin
    1. USJoeHughes
    plurals
    1. PL
      singulars
      1. LTDuplicate
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAssistance needed - Map does not load properly in JQuery UI Tabs - NOT A DUPLICATE
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAssistance needed - Map does not load properly in JQuery UI Tabs - NOT A DUPLICATE
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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