Question

我一直遇到谷歌地图的问题，并尝试在页面加载后正确显示，因此它不会显示地图的一半甚至四分之一，而是显示整个地图。

尽管我在网上看了几个问题，但我还没有能够做到这一点。

我一直在看的问题是：Google map API doesn't display correctly jQuery slideToggle

我试图在我自己的页面上复制它，它似乎正在加载地图，但没有用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

Google地图未正确初始化

1 个答案: