Google Maps don't work sometimes... Or almost always not working

Question

Well, Simply failed to understand why it does not work Google Maps. I read almost all the documentation, not only for the problems I have, but it also because I needed to use polygons, among others.

So, this is my code(I put some comments so that they can understand more quickly):

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div style="width:100%;height:400px;padding:0;margin:0;">
    <div id="canvas" style="width:100%; height:100%;padding:0;margin:0;"></div>
</div>

<script>
    function initialize() {
        var colors = ['#00bfff','#7eabe9','#799fe7','#7293e5','#6989e4','#5e7ee3','#5273e2','#4169e1','#4b6fde','#5274db','#5979d8','#5f7fd5','#6584d2','#698acf','#1e90ff'];
        var location = [
            {"name":"lisboa","lat":38.725717,"lng":-9.150248},
            {"name":"madrid","lat":40.420275,"lng":-3.705766},
            {"name":"burdeos","lat":44.836625,"lng":-0.581048},
            {"name":"loira","lat":46.621773,"lng":2.452032},
            {"name":"paris","lat":48.856929,"lng":2.341198},
            {"name":"bruselas","lat":50.848375,"lng":4.349679},
            {"name":"rotterdam","lat":51.922848,"lng":4.478452},
            {"name":"amsterdam","lat":52.373085,"lng":4.893276}
        ];
        var map = new google.maps.Map(document.getElementById('canvas'), {
            'center'    :   new google.maps.LatLng(0,-180),
            'zoom'      :   3,
            'mapTypeId' :   google.maps.MapTypeId.TERRAIN
        });

        // store positions on var flightPlanCoordinates
        var flightPlanCoordinates = [];

        // set markers and popovers/infWindow
        // *remember var flightPlanCoordinates*
        for (var i = 0; i < location.length; i++) {
            var lat     =   location[i].lat,
                lng     =   location[i].lng,
                name    =   location[i].name;
            var pos     =   new google.maps.LatLng(lat, lng);
            var infowindow =  new google.maps.InfoWindow({
                'content'   :   name,
                'map'       :   map,
                'position'  :   pos
            });
            infowindow.close();
            flightPlanCoordinates.push(pos);
            var marker = new google.maps.Marker({
                'position'  :   pos,
                'map'       :   map,
                'title'     :   name,
                'icon'      :   {
                    'path'      :   google.maps.SymbolPath.CIRCLE,
                    'scale'     :   5,
                    'strokeColor':  colors[i]
                }
            });
            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow.open(map, this);
            });
        }
        // set polylines
        // *remember var flightPlanCoordinates*
        for (var i = 0; i < flightPlanCoordinates.length; i++) {
            if(typeof flightPlanCoordinates[i+1] == 'undefined'){
                continue;
            }
            var PathStyle = new google.maps.Polyline({
                'path'          : [
                    flightPlanCoordinates[i],
                    flightPlanCoordinates[i+1]
                ],
                'strokeColor'   : colors[i],
                'strokeOpacity' : 1.0,
                'strokeWeight'  : 2,
                'map'           : map
            });
        }
    }
    // Draw Google Maps V3
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

The page/site have UTF-8 without BOM Charset via document and server(apache force UTF-8 and the HTML is write in UTF-8 without BOM).

Well, right now Look what I see(Each of the images is a snapshot to refresh the page):

Sometimes work fine, sometimes...

Anothertimes, work, work bad, very bad...

Anothertimes, work, work bad, very bad and show parts o cuts parts...

I also tested this in the following browsers:

• iPad Air 2, iOS 8.1 - Google Chrome 44.0.2403.67

• iPad Air 2, iOS 8.1 - Safari

• MacBook Air, yosemite - Google Chrome

• MacBook Air, yosemite - Safari

• MacBook Air, yosemite - Firefox

• Windows 8 - Google Chrome with disable Adblock

• Windows 8 - Firefox
• Windows 8 - Safari

• Windows 8 - Internet Explorer 8, 9, 10

• Android 4.4.4, Xiaomi MI4 - Google Chrome Android

• Android 4.4.4, Xiaomi MI4 - Firefox Android

• Window Phone 8.10 - Internet Explorer

• Firefox OS 1.1.0.0 - Internet Explorer

Here code snippet - http://jsbin.com/fozocimuke/edit?html,js,output - http://codepen.io/anon/pen/eNoGVN

Please, help me... I don't understand whats happend here... Thanks.

Answer 1

below answer was edited out of OlafErlandsen's question to stay true to Q&A format of SO. Upvote his question if below is useful

---

Well, my canvas element(div#canvas) have 0px height on start page(onload event), so, the solution is simple: need responsive map becausse Google Maps by default no is responsive.

Google Maps Api have multiples handlers and methods to help in this case, for example:

google.maps.event.trigger()

google.maps.event.addDomListener()

So, if you need "enable" responsive maps, you need this code:

// you need the "map" var and this has to be a "map" (new google.maps.Map(...))
var map = ...;
// And you need
google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    map.setCenter(center);
});
// And aditionally you can need use "trigger" for real responsive
google.maps.event.trigger(map, "resize");

And, if you use accordions like Bootstrap, jQuery, jQuery UI and another libs, and Google maps present similars problems, you can use trigger. "Remember and think in the case of "slide" effects of jQuery."

Example on jQuery UI:

$("#accordion").bind('accordionchange', function(event, ui) {
    // here you trigger
    // And remember "map" var, in this case we assume that it is a global variable.
    google.maps.event.trigger(map, "resize");
});