Im having problems working out how to get this toggle working, by default it hides the map and when you click show map i want the map to slide down and change the link test to hide map which then of course will slide back up but does not seem to be working..... anyone got any ideas?

Also if anyone knows of a solution for the google maps issue im also having please let me know, because the made is hidden when you show / slides down it does not show most of the map (something about resizing i think i remember reading up on)

i have made a jsfiddle here: <http://jsfiddle.net/DfVBb/> although does not work there at all for some reason. thanks 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, // 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>

```