Overview
  • Authentication
  • Routing APIs
    • Directions API
    • Directions Basic API
    • Distance Matrix API
    • Distance Matrix Basic API
    • Route Optimizer API
    • Fleet Planner API
  • Roads APIs
    • Snap To Road API
    • Nearest Roads API
    • Speed Limits API
  • Places APIs
    • Autocomplete API
    • Place Details API
    • Advance Place Details API
    • Nearby Search API
    • Advance Nearby Search API
    • Photo API
    • Text Search API
    • Address Validation API
    • Geofencing API
    • Elevation API
  • Geocoding
    • Geocoding API
    • Reverse Geocoding API
  • Map Tiles
    • 2D Tiles
      • Overview
      • Vector Tiles API
      • Static Tiles API
    • 3D Tiles
      • Overview and Integration
    • Style Editor
  • Navigation SDKs
    • Navigation SDK - Android
    • Navigation SDK - iOS
  • Map SDKs
    • Map SDK - iOS
    • Map SDK - Android
  • Places SDKs
    • Places SDK - Android
    • Places SDK - iOS
  • Web SDK
    • SDK Setup
    • Adding Markers
    • Events & Controls
    • Static Maps
    • Geolocation
    • Adding Shapes
    • Marker Clustering
    • Heatmap Layer
    • Ground Overlays
    • Custom Overlays
  • Ola Maps MCP
    • MCP Overview
    • Ola Maps MCP Server
  • Street View

Ola-Maps-Web SDK Setup

This documentation provides setup guide for ola maps web SDK

Setup

CDN Usage
Inject the minified script into your app using script tag
Using Package Manager
Install via npm
Import OlaMaps class
If you are using Next.js then import sdk as below.

Initialization

Get Api Key from credentials and initialize OlaMaps

Call init method to render the map
If you encounter any issues while integrating the SDK, please report them on our GitHub Issues page.

Example

If you want to render map in local languages, check the languages we support in style json in vector map tiles APIs. You need to add -[LANGUAGE CODE] to styleName.
To initialize 3d maps, we need to use additional parameter 'mode' and need to give the tileset endpoint.