Triggering Google Maps resize

Question

I have no JavaScript or jQuery knowledge, I have no idea what to do with this Google Maps code.

I need to trigger this Google Maps resize code:

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

The resize code above needs to be triggered after this waypoints is triggered below:

// Studio Page
jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );

},
{
offset: '10%'
});

The above code is waypoints.js. My problem is that Google Maps breaks (you can only see the top left corner of the map). But from what I have found on Stack Overflow and other forums, this is due to the fact that the div is going from display: none to display: block after my waypoints plugin is done (adds class "show"). So I need to then trigger the Google Maps resize after waypoints is done adding those classes.

How would I go about doing this?

EDIT:

I have tried this:

// Studio Page
jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );
var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
},
{
offset: '10%'
});

But putting the above resize trigger there throws the Google Maps off my long and lat center point where my marker is?

EDIT:

Here is my maps script:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
    var latlng = new google.maps.LatLng(-33.8333406,18.6470022);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"Get Directions"
    }); 
}
function calcRoute() {
    var start = document.getElementById("routeStart").value;
    var end = "-33.8333406,18.6470022";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            if (status == 'ZERO_RESULTS') {
                alert('No route could be found between the origin and destination.');
            } else if (status == 'UNKNOWN_ERROR') {
                alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
            } else if (status == 'REQUEST_DENIED') {
                alert('This webpage is not allowed to use the directions service.');
            } else if (status == 'OVER_QUERY_LIMIT') {
                alert('The webpage has gone over the requests limit in too short a period of time.');
            } else if (status == 'NOT_FOUND') {
                alert('At least one of the origin, destination, or waypoints could not be geocoded.');
            } else if (status == 'INVALID_REQUEST') {
                alert('The DirectionsRequest provided was invalid.');                   
            } else {
                alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
            }
        }
    });
}

Possible duplicate of [Google Maps resize css display none](http://stackoverflow.com/questions/23868251/google-maps-resize-css-display-none) — halfer, Dec 29 '15 at 22:22
This question from 18 months ago looks like a re-ask of your question three hours earlier. — halfer, Dec 29 '15 at 22:22

score 1 · Answer 1 · answered May 26 '14 at 12:50

1

Use these lines for centering your google map after resizing:

var currCenter = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

answered May 26 '14 at 12:50

K K

17,794
4
30
39

Hey, i found that on stackoverflow here: http://stackoverflow.com/questions/8558226/recenter-a-google-map-after-container-changed-width and tried it. Not working added that code you just pasted right where my google.maps.event trigger is and it now starts breaking the map again – user2810762 May 26 '14 at 13:04
Can you make a fiddle for that? – K K May 26 '14 at 13:06
updating my code above, basically google.maps.event.trigger(map, 'resize'); works fine on its own with .waypoints. But now it throws the map off my marker. and from what i read you need to get the map center right after resize triggers. But everywhere on stackoverflow are examples of this being done inside function initialize() { on the maps script. I need this done inside my waypoints code above, and to be triggered after resize. i will paste my script above aswell – user2810762 May 26 '14 at 13:14
Weird thing is no, no errors, just doesnt work. Going to upload it live so you can see the website if that is ok? Link is updated on my post at the bottom. – user2810762 May 26 '14 at 13:47

Triggering Google Maps resize

1 Answers1