jQuery UI + Tabs + Google Maps
So I know this is a common question, and yet I feel I have exhausted all the standard items out there.
I too have a problem with a jQuery Tab and a Google Map (2) inside a div. I have implemented the position absolute + -10000px option. I have implemented the $().bind('tabshow').... resizeMap();
I have had zero success with this issue.
I HAVE tried using the .load() with an external file that held my map, with great success, but it didn't seem like the proper solution as passing dynamic variables around didn't seem optimal.
<div id="contactTabs">
<ul>
<li><a href="#maps" title="Maps">Maps</a></li>
</ul>
<div id="maps">
<!-- I have placed my Javascript in here -->
<script开发者_JAVA百科 type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA633BaQwEpWRjp-R1aATdPBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSkwAkIjGEiaeBEJXzobQZ3JjouCg"></script>
<script type="text/javascript" src="js/jquery.gmap-1.1.0-min.js"></script>
<script type="text/javascript">
$(function() {
$("#newMap").gMap({
maptype: G_NORMAL_MAP,
address: '--centering adddy--',
zoom: 14,
markers: [ ]
});
});
</script>
<div id="newMap" style="height: 400px;"></div>
</div>
Thank you in advance for some help. I know this has been an exhausting issue with the tabs and maps. Hope there is something that someone can help me with.
Cheers,
after you are creating the map, try just adding:
$("#newMap").height(100);
$("#newMap").width(100);
or something similar.
Place your Google Maps API
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Place this code into other JS file called in the bottom of your page
$(document).ready(function() {
$('#idOfYourTabButton').on('click', function() {
lastCenter=map.getCenter(); //for center
google.maps.event.trigger(map, 'resize'); //for resize
map.setCenter(lastCenter); //for center too
});
});
Hope that helped
加载中,请稍侯......
精彩评论