Map doesn't load second time i click

Question

I want to show my open street map on a Kendo UI window. At First time on click the map shows, but after that it doesn't load. Even if I use google map the same result. After searching on google, I have found that we can not initialize map more than one time. I have tried in different ways, but it doesn't work. May be my approach was not good. Here 'is my code

var data=' ';

function createMap() {
    data = $("#map").kendoMap({
        center: [23.7099, 90.4071],
        zoom: 15,
        layers: [
            {
                type: "tile",
                urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a>."
            }
        ]
    });   
}

function showMap(e) {
    e.preventDefault();
    var wnd = $("#Map").data("kendoWindow");
    createMap();
    wnd.content(data);
    wnd.center().open();

}
@(Html.Kendo().Window().Name("Map")
  .Title("<span class='glyphicon glyphicon-map-marker'></span> Map of the road")
  .Visible(false)
  .Modal(true)
  .Draggable(true)
  .Width(635)
)

ShowMap fire on user click

Answer 1

You have to redraw the map. You can do this using the following code:

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

This will make the map refresh, fixing your issue.

Answer 2

请在函数末尾尝试

$("#map").data("kendoMap").resize();