JavaScript Maps SDK

Basic Map (Europe)

Initialize a European map in an HTML element with the Trimble Maps JavaScript SDK. The Region parameter is optional. If region is not set, it will default to the appropriate region based on your map data licensing. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
              container: 'map', // container id
                style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
                center: [2.341319, 48.857108], // Paris
                region: TrimbleMaps.Common.Region.EU,
                zoom: 14 // starting zoom
            });
        </script>
    </body>
</html>
Last updated May 26, 2023.