google.maps.event.trigger问题(地图,"调整大小")

时间:2014-07-06 07:51:20

标签: javascript jquery google-maps

感谢您查看它..我有一个问题.js我正在使用jquery来调整map-canvas div的大小。但是一旦它被调整大小我需要实际的谷歌地图重置其边界,我使用google.maps.event.trigger(地图,"调整大小"),这是我的代码,但一旦它触发调整大小div,它不能运行调整大小映射触发器,因为它是未定义的?这是我的.js

// JavaScript Document

// Scripts below in regards to instantiating the google map.
var map;

function initialize() {

var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
    zoom: 17,
    center: myLatLng,
    disableDefaultUI: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }

};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: myLatLng,
    map: map,
    title: '6 Station Street, Douglas Park, 2569' 
});

var contentString = '<div id="mapContent">'+'TESTING'+'</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

}

google.maps.event.addDomListener(window, 'load', initialize);

$(function() {

    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500);
        google.maps.event.trigger(map, "resize");
    });

});

1 个答案:

答案 0 :(得分:3)

map-canvas函数回调中更改animate维后,您只需调用initialize函数再次绘制地图。

$(function() {
    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500,function(){
            initialize();
        });

    });
});

见这里: demo jsfiddle