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");
    });

});

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");
    });

});

• javascript
• jquery
• google-maps

• I believe there is an issue with scope but i do not know how to fix it. – 22Ryann Commented Jul 6, 2014 at 8:01

1 Answer 1

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