[SalesForce] How to call java script function without refreshing page

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>

Best Answer

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>
Related Topic