Skip to main content

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 lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.16.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.16.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 June 15, 2023.