Пользовательский интерфейс jQuery + вкладки + Карты Google - PullRequest
Новая
       1

Пользовательский интерфейс jQuery + вкладки + Карты Google

2 голосов
/ 08 июля 2010

Итак, я знаю, что это обычный вопрос, и все же я чувствую, что исчерпал все стандартные элементы.

У меня тоже есть проблема с вкладкой jQuery и Google Map (2) внутри div.Я реализовал абсолютную позицию + -10000px.Я реализовал $ (). Bind ('tabshow') .... resizeMap ();

У меня был нулевой успех с этой проблемой.

Я пытался использовать .load () с внешним файлом, который содержал мою карту, с большим успехом, но это не казалось правильным решением, поскольку передача динамических переменных не казалась оптимальной.

<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 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>

Заранее спасибо за помощь.Я знаю, что это была утомительная проблема с вкладками и картами.Надеюсь, что-то мне поможет.

Приветствия, альтернативный текст http://i29.tinypic.com/5do6s2.jpg

Ответы [ 2 ]

1 голос
/ 08 июля 2010

после создания карты попробуйте просто добавить: 

$("#newMap").height(100);
$("#newMap").width(100);

или что-то подобное.

0 голосов
/ 12 ноября 2013

Поместите свой API Карт Google 

<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>

Поместите этот код в другой файл JS, называемый внизу вашей страницы 

$(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
    });
});

Надеюсь, что помог

...