DEPRECATED: Legacy cloud styling is deprecated and is slated for retirement starting on or after March 18, 2025. At that point, your legacy map styles will automatically update. Google recommends you update to the new cloud-based maps styling before March 2025. For more information about the deprecation, see Deprecations. To update your legacy styles, see Update a map style to the latest version.

Legacy cloud styling examples

On this page
Try Sample

This is a basic example of loading a custom styled map using a map ID. In this case, the Maps JavaScript references map ID 8e0a97af9386fef when the map is loaded, and automatically applies the map style associated with that map ID.

TypeScriptJavaScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

View example

Try Sample

JSFiddle.net Google Cloud Shell