Question

I’m using the goMap jQuery plugin for displaying my maps, and would like to have the map hidden and display it on click. However, the map isn’t displayed correctly.

In another thread I found I need to fire google.maps.event.trigger(map, 'resize'); to refresh the map, but for some reason this doesn’t work in my code.

Can anyone help me with this? Thanks

<a class="showmap" href="#">Show map</a>
<div id="map" style="height: 400px; width: 400px;"> </div>

<script type="text/javascript">
$(function() {
    $("#map").goMap({
        latitude: 56.948813,
        longitude: 24.104004,
        zoom: 6
    });
});

$(document).ready(function() {
    $("#map").hide();
    $('.showmap').click(function() {
        $("#map").slideToggle();
        google.maps.event.trigger($.goMap.mapId, 'resize');
    });
});
</script>

Answer 1

You need to use

google.maps.event.trigger($.goMap.map, 'resize');

I think you need to trigger resize after the div containing the map is fully revealed.

$('#map').slideToggle('slow', function() {
  google.maps.event.trigger($.goMap.map, 'resize');
});