> For AI agents: the complete documentation index is available at /core-sdk/map/web/llms.txt, the full documentation bundle is available at /core-sdk/map/web/llms-full.txt.

# Display a Simple Map

You can initialize a map located outdoor or indoor by using different parameters.
**Important**: **When the map zoom \< 14, the indoor source will not be loaded**.
If you initialize the map with the option venueId/buildingId/floorId/poiId under zoom 14, it cannot select the building.
In this case, you should remove the indoor indicated option then call `map.selectBuildingById()`\[or `map.selectFloorById()` or `map.selectVenueById()`] in `map.renderComplete()` callback to select the building manually.
Prepare the map container:

```html
<style>
  body {
    margin: 0;
    padding: 0;
  }
  html,
  body,
  #map {
    height: 100%;
  }
</style>
<body>
  <div id="map"></div>
</body>
```

## Outdoor Map

```html
<script>
  // register access with apiKey
  MapxusAuth.registerWithApiKey("your_appId", "your_secret");
  // init maplibre-gl map
  const maplibreMap = new maplibregl.Map({
    container: "map",
    zoom: 16,
    center: [114.174637, 22.319099],
  });
  // init mapxus map
  const map = new MapxusMap.Map({
    map: maplibreMap,
  });
</script>
```

## Indoor Map

```html
<script>
  MapxusAuth.registerWithApiKey("your_appId", "your_secret");
  // init maplibre-gl map
  const maplibreMap = new maplibregl.Map({
    container: "map",
    zoom: 17,
  });
  // init mapxus map
  const map = new MapxusMap.Map({
    map: maplibreMap,
    // Specify one of venueId/buildingId/floorId/poiId to locate.
    // If all are provided, poiId(poiId > floorId > buildingId > venueId > sharedFloorId) will be used.
    venueId: "venueId",
    // buildingId: 'buildingId',
    // floorId: 'floorId',
    // poiId: 'poiId'
    // sharedFloorId: 'sharedFloorId'
  });
</script>
```

Sample web page:

<iframe src="https://map-service.mapxus.com/bssww/initMapByVenue" width="100%" height="550px"></iframe>
