Javascript 使用谷歌地图进行jquery链接切换

我在解决如何使此切换正常工作时遇到问题，默认情况下，它会隐藏地图，当您单击“显示地图”时，我希望地图向下滑动，并将链接测试更改为“隐藏地图”，然后当然会向上滑动，但似乎不起作用。。。。。有人有什么想法吗

另外，如果有人知道我也有谷歌地图问题的解决方案，请让我知道，因为当你显示/向下滑动时，made是隐藏的，它不会显示大部分地图（关于调整大小的内容，我记得在上读过）

我在这里做了一个jsfiddle：尽管出于某种原因，它在那里根本不起作用。提前谢谢

HTML

JS

$（'#map_div'）.hide（）；
$（“#滑动切换”）。单击（函数（）{
$（'map#u div'）。滑动切换（'slow'，function（）{
$（'滑动切换'）.text（'隐藏映射'）；
}，函数（）{
$（'滑动切换'）.text（'显示地图'）；
});
返回错误
});

地图JS

$(document).ready(function() {
  var latlng = new google.maps.LatLng(53.334583, -0.961674);
  var options = {  
    zoom: 15, // This number can be set to define the initial zoom level of the map
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };  
  var map = new google.maps.Map(document.getElementById('map_div'), options);  
  var image = new google.maps.MarkerImage('/images/map-icon.png',
    new google.maps.Size(680, 178),
    new google.maps.Point(0,0),
    new google.maps.Point(18, 50)
  );
  var marker1 = new google.maps.Marker({
  position: new google.maps.LatLng(53.334583,-0.961674), 
  map: map,     
  icon: image
  });   
});
</script>

$（文档）.ready（函数（）{
var latlng=新的google.maps.latlng（53.334583，-0.961674）；
变量选项={
缩放：15，//此数字可设置为定义地图的初始缩放级别
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};  
var map=new google.maps.map（document.getElementById（'map\u div'），options）；
var image=new google.maps.MarkerImage（“/images/map icon.png”，
新谷歌地图大小（680178），
新google.maps.Point（0,0），
新谷歌地图点（18,50）
);
var marker1=新的google.maps.Marker({
位置：新google.maps.LatLng（53.334583，-0.961674），
地图：地图，
图标：图像
});   
});

我看了看你的小提琴，它必须清理一下。根据我的理解，您正在尝试在

按钮上
切换
谷歌地图

小提琴中的错误：

（1） 谷歌地图没有初始化。以下内容用于初始化谷歌地图

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

（2） 必须清理您的
.slideToggle（）
。有点像

$('#slideToggle').on('click', function () {
    $('#map_canvas').slideToggle('slow', function () {
        if ($('#slideToggle').text() !== "hide map") 
           $('#slideToggle').text('hide map');
        else 
           $('#slideToggle').text('show map');
    });
    return false;
});

我已经创建了一个，请仔细阅读并分享您的想法。
我成功地解决了这个问题，并解决了调整大小的问题

$(function () {
  // create a center
  var c = new google.maps.LatLng(53.334583, -0.961674);

  //create map options object
  var mapOptions = {
    zoom: 14,
    center: c,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  $("#slideToggle").click(function () {
    $('#map_canvas').slideToggle(300, function(){
    if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
    else $('#slideToggle').text('show map');
    google.maps.event.trigger(map, "resize"); // resize map
    map.setCenter(c); // set the center
  }); // slide it down

});

});

谢谢你的帮助，效果很好，但是我仍然面临地图未完全加载的问题，我已经用正确的宽度和高度进行了更新，但是正如你将看到的那样，它没有设置宽度-我知道这是隐藏和放置的常见问题。哦。很高兴你拿到了。我以前有
google.maps.event.trigger（map，'resize'）
yeap，现在我要弄清楚为什么自定义标记不起作用了。谢谢你的帮助，你帮我解决了这个问题，或者一定要解决！请记住，您应该使用
.on（'click'，function（）{
，而不是
。单击（function（）{
）。
$('#slideToggle').on('click', function () {
    $('#map_canvas').slideToggle('slow', function () {
        if ($('#slideToggle').text() !== "hide map") 
           $('#slideToggle').text('hide map');
        else 
           $('#slideToggle').text('show map');
    });
    return false;
});

$(function () {
  // create a center
  var c = new google.maps.LatLng(53.334583, -0.961674);

  //create map options object
  var mapOptions = {
    zoom: 14,
    center: c,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  $("#slideToggle").click(function () {
    $('#map_canvas').slideToggle(300, function(){
    if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
    else $('#slideToggle').text('show map');
    google.maps.event.trigger(map, "resize"); // resize map
    map.setCenter(c); // set the center
  }); // slide it down

});

});