Google Maps appears only in upper left corner

2 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Dec 2013

    Posted 06 Jan 2014 Link to this post

    Hi Fellas,

    I have been struggling a lot with this problem in the last couple of weeks. I use Google Chrome and when I switch tabs to the "Map" tab, Google Maps appears only in the upper left tile. I demonstrated my problem here http://jsbin.com/OzOhelAK/3/edit.
    Calling google.maps.event.trigger(map_canvas, 'resize') periodically does not change this. Though, I noticed that if I manually change the the windows size in Chrome it appears "correctly". I have also read about answers that suggest to initiate the map after the holding div is displayed not when the it is created.
    A la,
    $('.main-window').show(3000, function() {
        // create the map after the div is displayed
        var mapOptions = {
    But is there not a solid without such silly workaround?

    I would appreciate any help I can get on this!
    Thank you so much,
    Chris 



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 07 Jan 2014 Link to this post

    Hello Chris,

    The problem comes from the fact that the map initialization happens before the view is created, so incorrect height is reported the issue that you reported happens. You can use the init event of the View to create the map. I have tested it and it works as expected:

    http://jsbin.com/OzOhelAK/5/edit

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top