JavaScript Maps SDK

Jump to a series of locations

Use the jumpTo function to showcase multiple locations.

Example Code▶
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            html,body,#map {
                height: 100%;
            }
            #fly {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
        width: 50%;
        height: 40px;
        padding: 10px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #ee8a65;
      }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <br>
        <button type="button" id="fly">Fly</button>
        <script>
      TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
      const map = new TrimbleMaps.Map({
        container: 'map',
        style: TrimbleMaps.Common.Style.TRANSPORTATION,
        center: [-74.5, 40],
        zoom: 9,
      });

      document.getElementById('fly').addEventListener('click', () => {
        // Fly to a random location by offsetting the point -74.50, 40
        // by up to 5 degrees.
        map.flyTo({
          center: [
            -74.5 + (Math.random() - 0.5) * 10,
            40 + (Math.random() - 0.5) * 10,
          ],
          essential: true, // this animation is considered essential with respect to prefers-reduced-motion
        });
      });
        </script>
    </body>
</html>
Last updated July 22, 2025.