Google地图未正确初始化

Question

我在使用Google Maps时遇到了问题，并试图使其在页面加载后正确显示，因此它不会显示一半甚至四分之一的地图，而是完整的地图。

尽管环顾了互联网，并在此处提出了一些问题，但我仍无法做到这一点。

我一直在看的问题在这里： Google map API无法正确显示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

<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