Basic Map
Initialize a map in an HTML element with the Trimble Maps JavaScript SDK.<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.css" /> <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.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.setAPIKey('YOUR_API_KEY_HERE'); const map = new TrimbleMaps.Map({ container: 'map', // container id style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id center: [-77.38, 39], // starting position zoom: 3 // starting zoom }); </script> </body> </html>
Basic Map
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.css" /> <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.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.setAPIKey('YOUR_API_KEY_HERE'); const map = new TrimbleMaps.Map({ container: 'map', // container id style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id center: [-77.38, 39], // starting position zoom: 3 // starting zoom }); </script> </body> </html>