jQuery UI + Tabs + Google Maps_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-06 14:10 出处：网络

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&amp;v=2&amp;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,

jQuery UI + Tabs + Google Maps

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