How to use the JavaScript Maps API

This tutorial shows how to create a map and display it on a web page using MapTiler Cloud data.

  1. Create a basic HTML file.

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

  3. Create a <div> element with a certain id where you want your map to be.

    Add <div> tag into your page. This div will be the container where the map will be loaded.

  4. The div must have non-zero height.

    
     body { 
       margin: 0;
       padding: 0;
     }
        
     #map {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 100%;
     }
     
  5. Finally, load the map with the style

    
     const key = 'YOUR_MAPTILER_API_KEY_HERE';
     const map = new maplibregl.Map({
         container: 'map', // container id
         style: `https://api.maptiler.com/maps/streets-v2/style.json?key=${key}`, // style URL
         center: [16.62662018, 49.2125578], // starting position [lng, lat]
         zoom: 14 // starting zoom
     });
     map.on('error', function(err) {
       throw new Error("To load the map, you must replace YOUR_MAPTILER_API_KEY_HERE first");
     });
     
  6. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here.