Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Tutorials

  • This section provides tutorials on basic Google Maps JavaScript API implementations, such as adding maps and markers using HTML or JavaScript.

  • Learn to display a user's location, manage a large number of markers through clustering, and personalize the map with custom markers and legends.

  • Explore advanced features like creating interactive heatmaps using Firebase for real-time collaborative mapping experiences.

This section features several tutorials to get you up and running withMaps JavaScript API.

Add a Google map with a marker using HTML

Add a map with a marker to a web page using only HTML.

Add a Google Map with a marker using JavaScript

Add a map with a marker to a web page programmatically.

Show current location

Get the geographic location of a device on a Google map, using yourbrowser's HTML5 Geolocation feature along with Maps JavaScript API.

Cluster markers

Use marker clustering to display a large number of markers on a map.

Custom markers

Create markers using custom graphic icons.

Custom legends

Add a custom legend to your maps.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.