Google maps sometimes don't work ... Or almost always don't work

Question

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

So this is my code (I added a few comments so they can understand faster):

<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 has UTF-8 without a set of specifications through the document and server (apache UTF-8 and HTML commands are written to UTF-8 without specification).

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

Sometimes they work fine, sometimes ...

Once again, work, work is bad, very bad ...

One more time, work, work badly, very badly and show parts o cut 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 Adblock Disabled

• 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's the code snippet - http://jsbin.com/fozocimuke/edit?html,js,output - http://codepen.io/anon/pen/eNoGVN

Please help me ... I do not understand what happened here ... Thank you.

Answer 1

below the answer has been edited from OlafErlandsen's question to stay true to Q & SO format. Take his question if below is useful

---

Well, my canvas element (div # canvas) has a height of 0px at startup (onload event), so the solution is simple: I need a responsive map Because Google Maps does not by default, it responds.

Google Maps Api has multiple handlers and methods to help with this case, for example:

google.maps.event.trigger ()

google.maps.event.addDomListener ()

So, if you need to "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 other libraries, and there are similar problems on Google maps, you can use trigger . "Remember and think about the jQuery slide effect.

Example jQuery interface:

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

Answer 2

I have a solution for me, use the code below the line to solve the problem:

 // you need to use "map" var name Example : var map = (new google.maps.Map(...)); setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);