CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-chromegoogle-maps-api-3
Alex Man
Alex Man

Reputation: 4886

unexpected poly-line drawn along with the main poly-line in google-maps

I have created an application in google-map with poly-line, The application is working fine with the polyline drawn perfectly with the preview of poly-line, drawing each coordinate by coordinate in google-maps, but the only isuue is that during the preview in the plunker given below, open another tab in browser and spend sometime on it,....after sometime if you check the preview of the poly-line that is been been generated you can see some unexpected poly-lines drawn drawn along with the main poly-line like as shown below. I am using google chrome browser

can anyone please tell me what is the reason behind this

PLUNKER

<html lang="en">

  <head>
    <script data-require="[email protected]" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio"></script>
  </head>

  <body ng-app="app" ng-controller="Controller">
    <div style="width: 880px;">
      <div id="map" style="width: 880px; height: 500px; float: left;"></div>
    </div>
  </body>

</html>

enter image description here

Upvotes: 1

Views: 245

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117364

It's obviously a bug in chrome.

Browsers usually try to save memory by delaying timeouts in inactive windows. The order of the timeouts should not be affected by this attempt, but in chrome it does.

Simple test-case:

jQuery(
  function($)
  {
      for(var i=0;i<200;++i){
        (function(j){
           setTimeout(function(){
            $('<div/>').text(j).appendTo('body')
           },j*200)
        })(i)
      }
  }
);

http://jsfiddle.net/doktormolle/jtzsdm3t/

The result in the end should be 200 div's with ordered numbers from 0 to 199, but in chrome, as soon as you switch to another tab the order will be lost.

Possible workaround: don't start all timeouts, start only a single timeout and at the end of the handler-function start the next timeout(until you've reached the end of the array)

  $scope.autoRefresh = function() {
    try {
      var route = new google.maps.Polyline({
              path: [],
              strokeColor: '#FF0000',
              strokeOpacity: 2.0,
              strokeWeight: 3,
              editable: false,
              map:map
            }),
          index=0,
          delay=200,
          marker=new google.maps.Marker({map:map,icon:icon}),
          fx=function(){
              if(index<items.length){
                var cordinates=items[index];
                route.getPath().push(new google.maps.LatLng(cordinates.lat, 
                                                            cordinates.lng));
                route.setMap(map);
                moveMarker(map, marker, cordinates.lat, cordinates.lng);
                markLAT = cordinates.lat;
                markLNG = cordinates.lng;
                index++;
                setTimeout(fx,delay)
              }
          };

      if (items.length) {
          setTimeout(fx, delay);
      }
    } catch (e) {
      console.log(e);
    }
  };

PLUNKER

Upvotes: 1

Related Questions