Basic Map (Europe)

Initialize a European map in an HTML element with Trimble Maps JS SDK. 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/v2/trimblemaps-2.3.1.css" />
        <script src="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.3.1.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 7, 2021.