javascript - jquery link toggle with google maps -

im having problems working out how toggle working, default hides map , when click show map want map slide down , change link test hide map of course slide not seem working..... got ideas?

also if knows of solution google maps issue im having please let me know, because made hidden when show / slides down not show of map (something resizing think remember reading on)

i have made jsfiddle here: http://jsfiddle.net/dfvbb/ although not work there @ reason. in advance!

html

<div class="slidetogglebox">   <div id="map_div">&nbsp;</div>  </div> <a href="#" id="slidetoggle">show map</a>  

js

<script type="text/javascript">   $('#map_div').hide();   $('#slidetoggle').click(function() {     $('#map_div').slidetoggle('slow', function() {       $('#slidetoggle').text('hide map');     }, function(){       $('#slidetoggle').text('show map');     });     return false }); </script> 

maps js

$(document).ready(function() {   var latlng = new google.maps.latlng(53.334583, -0.961674);   var options = {       zoom: 15, // number can set define initial zoom level of 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> 

i managed work out solution , fixing resize issue

$(function () {   // create 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 center   }); // slide down  });  });