JavaScript Maps SDK

Getting Started with JavaScript Maps SDK

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.9.0.css" rel="stylesheet">
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.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.9.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>
Last updated October 11, 2022.