GMap загружен после документа готовый

я использовать эту функцию для создания моих GMap, когда пользователь нажимает на кнопкуGMap загружен после документа готовый

function getGMap(id_map,lat,lng) { 

     var mapOptions = { 
      center: new google.maps.LatLng(lat, lng), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById(id_map), 
      mapOptions); 

     marker = new google.maps.Marker({ 
      map:map, 
      //animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(lat, lng), 
      icon: "../imgmdg/icons/map_pin.png" 
     }); 
} 



$(".toggleMap").click(function(){ 

     var id_map=$(this).attr('data-idmap'); 
     var lat=$(this).attr('data-lat'); 
     var lng=$(this).attr('data-lng'); 
     var status=$(this).attr('data-status'); 

     if(status=="0") { 

      console.log(id_map); 
      console.log(lat); 
      console.log(lng); 
      $("#"+id_map).html(''); 
      getGMap(id_map,lat,lng); 


      $(this).attr('data-status','1'); 

     } 

});

триггер (класс toggleMap во втором «LI»)

<ul class="nav nav-tabs tabsFixBorder"> 
     <li class="active"><a href="#<?=$menu->id()?>tab1" data-toggle="tab" class="tab1">Men&ugrave;</a></li> 
     <li><a href="#<?=$menu->id()?>tab2" data-toggle="tab" class="tab2 toggleMap" data-idmap="map_<?=$menu->id()?>" data-lat="<?=$restaurant->lat()?>" data-lng="<?=$restaurant->lng()?>" data-status="0">Profilo</a></li> 
    </ul>

и моя страница есть некоторые DIV так:

<div id="map_1" class="gmap_container"></div> 
<div id="map_2" class="gmap_container"></div> 
<div id="map_3" class="gmap_container"></div>

это мой CSS:

html{ 
    font-family: Arial, Helvetica, Verdana; 
    font-size: 12px; 
    color: #2d2929;  
    height: 100%; 
} 
body { 
    height: 100%; 
    min-height: 100%; 
    position: relative; 
    background-image: url('../imgmdg/pattern/pattern.jpg'); 
} 
.gmap_container{ 
    display: block; 
    /*tried with height:100% as well*/ 
    height:200px; 
    width:100%; 
    background-color: #fff !important; 
    margin: 0px; 
    padding-bottom:10px; 
}

это работает только для первого щелчка Я после одного клика карт есть некоторые проблемы (он загрузит только часть карты) это скриншот проблемы: http://postimg.org/image/7apl01wn7/

спасибо все в консультации

источник

2013-04-10 Andreah

и как функция называется, что соотношение между дивой и функция? Покажите нам, пожалуйста, код обработчика событий кликов. – duncan

Я отредактировал и добавил то, что вы спрашиваете :) спасибо duncan – Andreah

Возможные проблемы: атрибут data-idmap начинается с 'map_', но ваш HTML говорит' gmap_'. Вы используете значения lat и lng, прочитанные из вашего HTML; вы должны, вероятно, использовать parseFloat(), чтобы убедиться, что они правильно преобразованы в числовые значения, а не строки. – duncan

Наконец-то я нашел решение для своей проблемы: в конце я использовал вкладку начальной загрузки в качестве контейнера для своей карты. хитрости заключается в загрузке карты после загрузки на вкладке (например, я использовал самозагрузку события «показанного»)

$('a[data-toggle="tab"]').on('shown', function (e) { 
    getGMap(id_map,lat,lng); 
});

надежда этой помощь

источник

2013-04-16 21:25:48 Andreah

GMap загружен после документа готовый

ответ

Смежные вопросы