CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-api
Olaf Erlandsen
Olaf Erlandsen

Reputation: 6036

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

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...

enter image description here

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

enter image description here

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

enter image description here enter image description here enter image description here

I also tested this in the following browsers:

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.

Upvotes: 10

Views: 9079

Answers (2)

Irshad Khan
Irshad Khan

Reputation: 6026

I got Solution for me, Use Below code of line to resolve the issue :

// you need to use "map" var name Example : var map = (new google.maps.Map(...));

setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);

Upvotes: 2

David
David

Reputation: 3184

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

Upvotes: 6

Related Questions