DEPRECATED: Legacy cloud styling is deprecated and is slated for retirement in March 2025. At that point, your legacy map styles may no longer work. 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.
Stay organized with collections
Save and categorize content based on your preferences.
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.
TypeScript
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;
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-11-26 UTC."],[],[]]