问题
None of the "Answers" from the other post resolve my issue. Please Read My Post and Attempt to guide me in the right direction
EDIT - EDIT - EDIT
I have updated the java script to include the recommended function
I have included the HTML here for those who do not like jsfiddle
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.
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.
I need help. A fresh set of Eyes would be extremely Helpful.
Any help would be greatly appreciated as I am extremely far behind on this project.
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.
The issue is on the LOCATION Tab
The jsfiddle - http://jsfiddle.net/hughesjoseph/hNKPY/
The test site http://l2technotes.dyndns.org
Loads correctly if you go to address/#tabs-4
Complete Java Script
(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('>');
}, function () {
$Selectors.dirPanel.animate({
'left': '+=305px'
});
jQuery(this).html('<');
});
// 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('<html><head><title>Driving Directions to Electrolysis by Bridgett</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#accordion").accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
});
Pertinent HTML
<html>
<head>
<meta charset="utf-8">
<title>Electrolysis by Bridgett</title>
<!-- Favorite Icon -->
<link rel="shortcut icon" href="images/beLogoColor3D.png" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body onload: "#maptab";>
<div id="tabs">
<ul style="border:3px solid green">
<li class="myMenu"><a href="#tabs-4" onclick="maptab"><img height="20px" src="images/map.png" alt="" class="img center" /> Location</a>
</li>
</ul>
<div id="tabs-4">
<div class="myDirections" style="width:19%;">
<div>
<form>
<p>
<label class="mytxt">Driving From :</label>
<br />
<input type="text" value="" id="dirSource" style="width:98%;" />
</p>
<input type="hidden" value="1003 E. Broad St., 76063" id="dirDestination" />
<div class="mybutton"><a href="#getDirections" id="getDirections">Get Directions to<br />Electrolysis by Bridgett</a>
</div>
<center>
<input type="button" value="Print Directions" onclick="PrintElem('#directionSteps')" />
</center>
</form>
</div>
<div id="directionSteps">
<center>
<p class="msg">Step by Step Directions Appear Here</p>
</center>
</div>
</div>
<div class="myMap" style="width:78%;">
<div id="mapCanvas" style="width:100%;height:550px"></div>
</div>
</div>
</div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
<script src="js/sample.js" type="text/javascript"></script>
</html>
回答1:
I've had this problem too:
google.maps.event.trigger(map, 'resize');
trigger this when tab is done fading in (default after 250 ms). This piece of code worked for me:
var mapFirstClick = false;
$("#tabMap").click(function() {
mapFirstClick || setTimeout(function() {
google.maps.event.trigger(map, 'resize');
mapFirstClick = true;
map.setCenter(latLng);
}, 250);
});
来源：https://stackoverflow.com/questions/15748374/assistance-needed-map-does-not-load-properly-in-jquery-ui-tabs-not-a-duplica