JavaScript Maps SDK

Getting Started with JavaScript Maps SDK

Contents

The instructions below show how to quickly add a map to your application.

You will need an API key to get started. Request a free, trial API Key. (Only maps of the U.S. and Canada are available with a trial key.)

After that, it is just a few lines of code to show a map.

CDN Example

Include the JavaScript and CSS files in the <head> of your HTML file.

<link href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" rel="stylesheet">
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>

Include the following code in the <body> of your HTML file. This code instantiates a new Map object and defines the HTML element that will contain it.

<script>
  TrimbleMaps.APIKey = "YOUR_KEY_HERE";

  var myMap = new TrimbleMaps.Map({
    container: "myMap",
    center: new TrimbleMaps.LngLat(-96, 35),
    zoom: 3
  });

myMap.on('load', function() {
  // customize your map once loaded
});
</script>

Module Bundler Example

Install the npm package.

npm install --save @trimblemaps/trimblemaps-js

Include the JavaScript and CSS files in the <head> of your HTML file. This code instantiates a new Map object. Update the code to include the ID for the div you would like the map rendered inside of.

<link href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" rel="stylesheet">

import TrimbleMaps from "@trimblemaps/trimblemaps-js";

TrimbleMaps.APIKey = "YOUR_KEY_HERE";

const myMap = new TrimbleMaps.Map({
  container: "myMap",
  center: new TrimbleMaps.LngLat(-96, 35),
  zoom: 3
});

myMap.on('load', function() {
  // customize your map once loaded
});

The Map constructor takes an options object. The only required option attribute is the container.

The preceding example assumes that your HTML document contains an element with the id “myMap” as follows 

<div id="myMap" style="height: 600px; width: 800px;"></div>

Dark Mode

The Maps SDK also supports a dark-mode UI (opt-in, not automatic) by adding class="trimblemaps-dark" to the map div.

Take a look at a dark mode example.

Strict CSP Environments

For web apps with a strict Content Security Policy (CSP), CSP JS and Worker JS files are available.

  • The strict CSP bundle also requires manually setting the path to the TrimbleMaps worker source to use the worker.js file.
  • The CSP and worker.js must be served from the same origin as the page that loads it.
Last updated June 21, 2024.
Contents