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>

Improve this question
4
  • 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, 2019 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, 2019 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, 2019 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, 2019 at 6:56

1 Answer 1

Reset to default
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>
Improve this answer
4
  • It's not working , it is just unstoppable reloading , nothing is showing.
    – Manish Mourya
    Mar 12, 2019 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, 2019 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, 2019 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, 2019 at 11:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .