API directory · Google Maps Platform

Maps JavaScript API: interactive maps for your web product

The Maps JavaScript API renders dynamic, customizable interactive maps in a browser. It supports road, satellite, hybrid, terrain and custom map types, 3D maps with camera control, advanced markers, WebGL overlays, GeoJSON and KML data visualization, heatmaps, and integrations with Places, Directions and Geocoding. Lepton integrates it for web products that need a map as a core UI surface.

Get a demo →

What the API does

Dynamic interactive maps with layers, markers and custom styling

The Maps JavaScript API renders interactive maps in a web browser. Map types include road, satellite, hybrid, terrain and fully custom styles through cloud-based map styling. 3D maps with camera pitch and heading control are supported. Advanced markers support custom HTML, clustering and collision behavior. Overlay capabilities include shapes, polylines, polygons, info windows, ground overlays, tile overlays, WebGL overlays and Data Layer visualization.

Data visualization formats include GeoJSON, KML, heatmaps and dataset layers. Traffic, transit and bicycling layers are available. The API integrates with Place Search, Autocomplete, Directions and Geocoding as embedded libraries, and Street View is supported inline. It covers 40+ languages.

Use cases

Where teams build on the Maps JavaScript API

01
Delivery · Real-time asset tracking on a live map

Delivery and logistics operations dashboards use the Maps JavaScript API to render vehicle locations, route polylines and delivery-zone overlays updated in real time, giving dispatchers a live operational view.
02
Proptech · Property search maps with custom styling

Real estate portals render listings as advanced markers on a custom-styled map, with polygon overlays for locality boundaries and heatmap layers for price density, so buyers find properties spatially rather than through a list.
03
Analytics · Geospatial data visualization with WebGL overlays

Analytics products use WebGL overlays and dataset layers to render large-scale geospatial datasets on the map surface, including density grids, travel-time isochrones and coverage polygons.
04
Consumer · Location-based discovery and search

Consumer super-apps embed a Maps JavaScript API surface with Places Autocomplete and Nearby Search so users discover services geographically, with the brand's custom visual layer applied via cloud-based styling.

Where Lepton comes in

Integration architecture, custom styling and cost engineering for web products

The Maps JavaScript API is a broad surface. The integration decisions that matter are which libraries to load (and not load), how markers and overlays are managed at scale, and how cloud-based styling is configured so the map fits the product brand without degrading load performance.

Architecture

Library selection and loading strategy

The Maps JavaScript API loads libraries on demand. We define which libraries are needed for each feature surface, configure dynamic loading and validate that unused libraries are not adding load cost to every page.

Styling

Cloud-based map styling to your brand

Cloud-based styling applies a JSON style definition to the map without shipping style data to the client. We build the style spec, apply it via Map ID and validate it across map types and zoom ranges.

Cost

Dynamic maps SKU and usage engineering

Dynamic Maps billing is per map load. We instrument usage, identify high-frequency load paths and configure session and caching strategies to keep cost predictable as user volume grows.

Google Maps Platform · Maps JavaScript API

importLibrary · AdvancedMarkerElement · the Data layer

runs in the browser, not over an endpoint · billed per dynamic map load · cloud-based styling is bound to the Map ID

JavaScript

browser API surface

Bootstrap map instance

// Libraries load on demand. Nothing you do not import is downloaded,
// which is the difference between a fast map and a heavy one.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

const map = new Map(document.getElementById("map"), {
  center: { lat: 18.5204, lng: 73.8567 },
  zoom: 12,
  mapId: "YOUR_MAP_ID"
});

// The Map ID is the handle for cloud-based styling, and advanced
// markers will not render without one.

Two lines set the cost and performance profile of the whole product. Each importLibrary call is a library you have chosen to ship, and each map instance is a dynamic map load you are billed for, which is why a page that mounts a map on scroll and one that mounts it on click bill differently for the same traffic.

Markers and overlays depots and zones

const depots = [
  { title: "Hinjawadi hub", position: { lat: 18.5913, lng: 73.7389 } },
  { title: "Hadapsar hub",  position: { lat: 18.5089, lng: 73.9260 } },
  { title: "Pimpri hub",    position: { lat: 18.6298, lng: 73.7997 } }
];

for (const depot of depots) {
  new AdvancedMarkerElement({
    map,
    position: depot.position,
    title: depot.title
  });
}

// Zone boundaries are data, not markers. They arrive as GeoJSON on
// the Data layer and are styled once, not per feature.
map.data.loadGeoJson("/zones/pune-delivery-zones.geojson");
map.data.setStyle({ strokeWeight: 1, fillOpacity: 0.12 });

libraries2 imported, 2 constructors destructured, nothing else downloadedmarkers3 depots in the array, 3 AdvancedMarkerElement instancesmapIdrequired: without one the advanced markers do not render at all

Fig. · The bootstrap and the overlay pass, trimmed for the page. The loader call, the library names, the constructors and their options, and the Data layer methods are the documented Maps JavaScript API surface. The Pune depot names, coordinates and the GeoJSON path are illustrative and describe no real network, customer or dataset.

Get started

Tell us the map use case. We will design the integration.

Bring the web product problem. We map it to the right Maps JavaScript API surfaces, styling approach and integration architecture.