Карты Google не правильно инициализируются

Question

У меня возникла проблема с Картами Google и попытка правильно отобразить ее после загрузки страницы, чтобы она не отображала половину или даже четверть карты, а полную карту.

Я еще не смог этого сделать, несмотря на то, что посмотрел вокруг Интернета и на пару вопросов здесь.

Вопрос, который я смотрел на это здесь: Google map API doesn't display correctly jQuery slideToggle

Я имел взглянуть на скрипку здесь: http://jsfiddle.net/fXsjb/8/

Я попытался повторить это на моей странице, и это, казалось, загружая карту, но не переключая ее с помощью функции slideToggle.

Кроме того, моя скрипка, похоже, не работает. Вы можете обнаружить, что здесь: http://jsfiddle.net/wilcochris/fXsjb/13/

Я использую следующий код, чтобы попытаться получить эту работу:

$('.mapme').click(function() 
{ 
    var $this = $(this); 
    $this.find('.mapit').slideToggle(500); 
    $(this).text($(this).text() == 'Show Map' ? 'Hide Map' : 'Show Map'); 
}); 
    function initialize() 
    { 
     var latlng = new google.maps.LatLng(48.89376,2.33742); 
     var settings = { 
     zoom: 15, 
     center: latlng, 
     disableDefaultUI: true, 
     zoomControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), settings); 
    var marker=new google.maps.Marker({ 
      position:latlng, 
      }); 
    marker.setMap(map); 

     google.maps.event.addListenerOnce(map, 'idle', function() 
     { 
      $('.mapit').hide(); 
     }); 
    } 
google.maps.event.addDomListener(window, 'load', initialize); 

Это дивы, что я слишком

<div class='mapme'>Show Map</div> 
    <div class="mapit"> 
    <div id="map" style="width:300px;height:140px;"></div> 
    </div> 
</div> 

Есть указатели было бы высоко оценено. У меня такое чувство, что мне не хватает чего-то очевидного, что для меня слишком очевидно, что я могу это понять.

Заранее спасибо

Answer 1

Изменить HTML-код, как показано ниже:

<div class='mapme'>Show Map</div> 
<div class = "toggle"> 
    <div class="mapit"> 
    <div id="map" style="width:300px;height:140px;"></div> 
    </div> 
</div> 

DEMO