how to stop animating symbol at end of polyline?

Question

how to stop animating symbol at end of polyline?

86 Views Asked by Ankit.Z At 18 October 2022 at 12:54

I'm using basic animation example from google-maps-docs.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}


function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  const icons = line.get("icons");
  window.setInterval(() => {
    count = (count + 1) % 200;
    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 60);
}

How do I stop animation at 2nd point of polyline i.e last point and show marker at that point? As you can see in the doc the animation keeps repeating again again surely because of interval but I want to add clearInterval the moment my icon offset is at last point

I tried following:


const stopAni = ref<number | undefined>();
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  const icons = line.get("icons");
  stopAni.value = window.setInterval(() => { // setting interval to variable
    count = (count + 1) % 200;
    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 60);

// I want to clearInterval at last point but i don't know where to add that?
//clearInterval(stopAni.value)
}

Original Q&A

There are 1 best solutions below

**geocodezip** · Accepted Answer · 2022-10-18T15:36:06.637000

Call clearInterval with the intervalID when the count is equal to the maximum value (199):

if (count >= 199)
  window.clearTimeout(intervalHandler);

full function that animates once:

function animateCircle(line) {
  let count = 0;

  let intervalHandler = window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    console.log("count="+count+" offset="+icons[0].offset);
    line.set("icons", icons);
    if (count >= 199)
        window.clearTimeout(intervalHandler);
   
  }, 20);

proof of concept fiddle

code snippet:

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 20.291,
      lng: 153.027
    },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [{
        lat: 22.291,
        lng: 153.027
      },
      {
        lat: 18.291,
        lng: 153.027
      },
    ],
    icons: [{
      icon: lineSymbol,
      offset: "100%",
    }, ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals, stop at the end.
function animateCircle(line) {
  let count = 0;

  let intervalHandler = window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
    if (count >= 199)
      window.clearTimeout(intervalHandler);

  }, 20);
}

window.initMap = initMap;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Animating Symbols</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>

</html>

how to stop animating symbol at end of polyline?

There are 1 best solutions below

Related Questions in TYPESCRIPT

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-MAPS-API-3

Related Questions in GOOGLE-POLYLINE

Trending Questions

Popular # Hahtags

Popular Questions