0

When I'm trying to solve witout refresh page (Map should not blink on increasing of list index). I have tried it , but it's not happening without refreshing and i want to solve this problem with java script not JQuery. How to prevent blinking of map ? Can you please help me to solve this problem. This is a code , getting a problem in refreshing.

Google Map

    <style>          
      #map { 
        height: 800px;    
        width: 1600px;            
      }          
    </style>        
</head>    
<body>        
    <div style="padding:10px">
        <div id="map"></div>
    </div>

    <script type="text/javascript">
    var map,myVar;
    var i=0;

    function initMap() { 
        var locList = [{lat:13.0196,lng:77.5968},{lat:13.0358,lng:77.5970},{lat:12.8399,lng:77.6831},{lat:12.9081,lng:77.6476},
                       {lat:12.9279,lng:77.6271},{lat:12.9166,lng:77.6101},{lat:12.972442,lng:77.580643},{lat:12.9279,lng:77.6271},
                       {lat:12.9719,lng:77.6412}];
        if(i<locList.length){

        map = new google.maps.Map(document.getElementById('map'), {
          center: locList[i],
          zoom: 14                    
        });

        var marker = new google.maps.Marker({
          position: locList[i],
          map: map,

        }); 
        }
        i++;
        //myVar = setInterval(initMap, 8000);
        window.setTimeout("initMap();", 1000*10); 
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmQ9NAS9VvEfJtoK8u_a_H9l8u45ZESW0&callback=initMap" async="true" defer="true" ></script>
</body>    

  • You are continuously loading map again and again, which is not required, you are just changing the center of map every 10 seconds, this is exactly what you want? – Aditya Vijay Mar 12 at 6:29
  • I'm also changing center accoring to locList index value but without changing index, i can't able to change center that why i'm calling function at particular time interval, could you please explain in detail how to do it ? – Manish Mourya Mar 12 at 6:37
  • What do you mean by without changing index? If you will change the center of map, the map will blink a bit (but not that much you are getting as you are reloading the map) if the area of that new center is not already loaded in browser. – Aditya Vijay Mar 12 at 6:41
  • I mean to say center change according to locList ---> center: locList[i] locList is list as you can see above code and every times center will change according locList index and That why i have to increase value of i(index of locList) in every particular time thus center wil change according locList index , I have only one option to increase i value in particular time that why i'm calling function in every 10 sec , i can't use loop there , if i'm using loop then it's totally not working. – Manish Mourya Mar 12 at 6:56
1

As I mentioned in comments, you can do this without reloading the map again and again, try this!

<style>          
      #map { 
        height: 800px;    
        width: 1600px;            
      }          
    </style>        
</head>    
<body>        
    <div style="padding:10px">
        <div id="map"></div>
    </div>

    <script type="text/javascript">
    var map, myVar, marker;
    var i=0;

    function initMap() { 
        var locList = [{lat:13.0196,lng:77.5968},{lat:13.0358,lng:77.5970},{lat:12.8399,lng:77.6831},{lat:12.9081,lng:77.6476},
                       {lat:12.9279,lng:77.6271},{lat:12.9166,lng:77.6101},{lat:12.972442,lng:77.580643},{lat:12.9279,lng:77.6271},
                       {lat:12.9719,lng:77.6412}];

        if (!map) {
            map = new google.maps.Map(document.getElementById('map'), {
              center: locList[0],
              zoom: 14                    
            });
            marker = new google.maps.Marker({
                position: locList[0],
                map: map,
            });
            i++;
            window.setTimeout(initMap, 1000*10);
            return;
        }
        if(i<locList.length){
            map.setCenter(locList[i]);
            var latlng = new google.maps.LatLng(locList[i].lat, locList[i].lng);
            marker.setPosition(latlng);
            i++;
            window.setTimeout(initMap, 1000*10); 
        }

    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmQ9NAS9VvEfJtoK8u_a_H9l8u45ZESW0&callback=initMap" async="true" defer="true" ></script>
</body>  
  • It's not working , it is just unstoppable reloading , nothing is showing. – Manish Mourya Mar 12 at 7:30
  • @ManishMourya what you want to show? It is showing the markers on map, with changing the center every 10 seconds and placing the marker there as well! – Aditya Vijay Mar 12 at 8:57
  • But this type of way my code is also working as you told, but i want , it shouldn't blink after changing the center. Your code is also blinking. Can you done this without blinking. – Manish Mourya Mar 12 at 9:53
  • Still there is some difference, my code was just changing the center, and in your code, map is getting reloaded. As I mentioned, if the map image is not loaded in browser already it will give blink effect, try having 1st and 2nd coordinates very near and check the difference in both codes. You can observe the Map | Satellite button as well, in my code it doesn't reload, but reloads in your case. – Aditya Vijay Mar 12 at 11:10
  • OK , i got it , Thank you so much. – Manish Mourya Mar 12 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.