CODEWITHSUNDEEP
javascriptjquerygoogle-maps
22Ryann
22Ryann

Reputation: 135

Issue with google.maps.event.trigger(map, "resize")

Thanks for checking it out.. I have an issue with this .js were i am using jquery to resize the map-canvas div. But once it has been resized i need the actual google map to reset its boundaries which i am using google.maps.event.trigger(map, "resize"), here is my code but once it fires the resize of the div, it cannot run the resize map trigger due to it being undefined? here is my .js

// JavaScript Document

// Scripts below in regards to instantiating the google map.
var map;

function initialize() {

var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
    zoom: 17,
    center: myLatLng,
    disableDefaultUI: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }

};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: myLatLng,
    map: map,
    title: '6 Station Street, Douglas Park, 2569' 
});

var contentString = '<div id="mapContent">'+'TESTING'+'</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

}

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

$(function() {

    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500);
        google.maps.event.trigger(map, "resize");
    });

});

Upvotes: 1

Views: 8704

Answers (1)

lokeshpahal
lokeshpahal

Reputation: 541

You have just call the initialize function to draw map again after the map-canvas dimensions changed in animate function callback.

$(function() {
    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500,function(){
            initialize();
        });

    });
});

see here: demo jsfiddle

Upvotes: 3

Related Questions