Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/examples.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/examples.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/examples.md.txt "View this page for the JavaScript platform docs.") Sample apps demonstrating the features of the Maps JavaScript API are listed below for quick reference. ## Basics - [Simple Map](https://developers.google.com/maps/documentation/javascript/examples/map-simple.md.txt) - [Showing Pixel and Tile Coordinates](https://developers.google.com/maps/documentation/javascript/examples/map-coordinates.md.txt) - [Geolocation](https://developers.google.com/maps/documentation/javascript/examples/map-geolocation.md.txt) - [Localizing the Map](https://developers.google.com/maps/documentation/javascript/examples/map-language.md.txt) - [Right-to-Left Languages](https://developers.google.com/maps/documentation/javascript/examples/map-rtl.md.txt) - [Custom Map Projections](https://developers.google.com/maps/documentation/javascript/examples/map-projection-simple.md.txt) - [Lat/Lng Object Literal](https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal.md.txt) - [Load the JS API with @googlemaps/js-api-loader](https://developers.google.com/maps/documentation/javascript/examples/js-api-loader-map.md.txt) ## Events - [Simple Click Events](https://developers.google.com/maps/documentation/javascript/examples/event-simple.md.txt) - [Using Closures in Event Listeners](https://developers.google.com/maps/documentation/javascript/examples/event-closure.md.txt) - [Accessing Arguments in UI Events](https://developers.google.com/maps/documentation/javascript/examples/event-arguments.md.txt) - [Getting Properties With Event Handlers](https://developers.google.com/maps/documentation/javascript/examples/event-properties.md.txt) - [Getting Lat/Lng from a Click Event](https://developers.google.com/maps/documentation/javascript/examples/event-click-latlng.md.txt) - [POI Click Events](https://developers.google.com/maps/documentation/javascript/examples/event-poi.md.txt) ## Controls and Interaction - [Default Controls](https://developers.google.com/maps/documentation/javascript/examples/control-default.md.txt) - [Disabling the Default UI](https://developers.google.com/maps/documentation/javascript/examples/control-disableUI.md.txt) - [Adding Controls to the Map](https://developers.google.com/maps/documentation/javascript/examples/control-simple.md.txt) - [Control Options](https://developers.google.com/maps/documentation/javascript/examples/control-options.md.txt) - [Control Positioning](https://developers.google.com/maps/documentation/javascript/examples/control-positioning.md.txt) - [Custom Controls](https://developers.google.com/maps/documentation/javascript/examples/control-custom.md.txt) - [Adding State to Controls](https://developers.google.com/maps/documentation/javascript/examples/control-custom-state.md.txt) - [Cooperative Gesture Handling](https://developers.google.com/maps/documentation/javascript/examples/interaction-cooperative.md.txt) - [Static Placeholder Map](https://developers.google.com/maps/documentation/javascript/examples/programmatic-load-button.md.txt) ## Customize a Map - [Styled Map - map ID](https://developers.google.com/maps/documentation/javascript/examples/map-id-style.md.txt) - [Marker Collision Management](https://developers.google.com/maps/documentation/javascript/examples/marker-collision-management.md.txt) - [Styled Maps - Night Mode](https://developers.google.com/maps/documentation/javascript/examples/style-array.md.txt) - [Styled Map Types](https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple.md.txt) - [Hiding Map Features With Styling](https://developers.google.com/maps/documentation/javascript/examples/hiding-features.md.txt) - [Styled Map Selection](https://developers.google.com/maps/documentation/javascript/examples/style-selector.md.txt) ## Data-driven styling for boundaries - [Style a boundary polygon](https://developers.google.com/maps/documentation/javascript/examples/boundaries-simple.md.txt) - [Make a choropleth map](https://developers.google.com/maps/documentation/javascript/examples/boundaries-choropleth.md.txt) - [Handle click events](https://developers.google.com/maps/documentation/javascript/examples/boundaries-click.md.txt) - [Search for boundaries by name or Place ID](https://developers.google.com/maps/documentation/javascript/examples/boundaries-text-search.md.txt) ## Data-driven styling for datasets - [Style point data features](https://developers.google.com/maps/documentation/javascript/examples/dds-datasets-point.md.txt) - [Style polygon data features](https://developers.google.com/maps/documentation/javascript/examples/dds-datasets-polygon.md.txt) - [Handle click events on a polygon](https://developers.google.com/maps/documentation/javascript/examples/dds-datasets-polygon-click.md.txt) - [Style polygon data features using colors](https://developers.google.com/maps/documentation/javascript/examples/dds-datasets-polygon-colors.md.txt) - [Style polyline data features](https://developers.google.com/maps/documentation/javascript/examples/dds-datasets-polyline.md.txt) ## Web Components - [Add a Map Web Component](https://developers.google.com/maps/documentation/javascript/examples/web-components-map.md.txt) - [Add a Map with Markers using Web Components](https://developers.google.com/maps/documentation/javascript/examples/web-components-markers.md.txt) - [Add a Map Web Component with Events](https://developers.google.com/maps/documentation/javascript/examples/web-components-events.md.txt) ## Add markers to the Map ### Advanced Markers - [Simple Advanced Markers](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-simple.md.txt) - [Basic Marker Customization](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-basic-style.md.txt) - [Create Markers with Graphics](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-graphics.md.txt) - [Create Markers using HTML and CSS](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-html-simple.md.txt) - [Create Interactive Markers using HTML and CSS](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-html.md.txt) - [Animate Markers using CSS](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-animation.md.txt) - [Control Marker Collision Behavior](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-collision.md.txt) - [Set Marker Altitude](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-altitude.md.txt) - [Control Marker Visibility by Zoom Level](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-zoom.md.txt) - [Make Markers Clickable and Accessible](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-accessibility.md.txt) - [Make Markers Draggable](https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-draggable.md.txt) - [Marker Clustering](https://developers.google.com/maps/documentation/javascript/examples/marker-clustering.md.txt) - [Custom Marker Clustering](https://developers.google.com/maps/documentation/javascript/examples/marker-clustering-custom.md.txt) ### Markers (Legacy) - [Simple Markers](https://developers.google.com/maps/documentation/javascript/examples/marker-simple.md.txt) - [Marker Labels](https://developers.google.com/maps/documentation/javascript/examples/marker-labels.md.txt) - [Removing Markers](https://developers.google.com/maps/documentation/javascript/examples/marker-remove.md.txt) - [Simple Marker Icons](https://developers.google.com/maps/documentation/javascript/examples/icon-simple.md.txt) - [Complex Marker Icons](https://developers.google.com/maps/documentation/javascript/examples/icon-complex.md.txt) - [Markers with SVG and Font](https://developers.google.com/maps/documentation/javascript/examples/marker-modern.md.txt) - [Marker Accessibility](https://developers.google.com/maps/documentation/javascript/examples/marker-accessibility.md.txt) - [Marker Animations](https://developers.google.com/maps/documentation/javascript/examples/marker-animations.md.txt) - [Marker Animations With setTimeout()](https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration.md.txt) ## Draw on the Map - [Info Windows](https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple.md.txt) - [Simple Polylines](https://developers.google.com/maps/documentation/javascript/examples/polyline-simple.md.txt) - [Removing Polylines](https://developers.google.com/maps/documentation/javascript/examples/polyline-remove.md.txt) - [Deleting a Vertex](https://developers.google.com/maps/documentation/javascript/examples/delete-vertex-menu.md.txt) - [Complex Polylines](https://developers.google.com/maps/documentation/javascript/examples/polyline-complex.md.txt) - [Simple Polygons](https://developers.google.com/maps/documentation/javascript/examples/polygon-simple.md.txt) - [Polygon Arrays](https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays.md.txt) - [Polygon Auto-Completion](https://developers.google.com/maps/documentation/javascript/examples/polygon-autoclose.md.txt) - [Polygon With Hole](https://developers.google.com/maps/documentation/javascript/examples/polygon-hole.md.txt) - [Circles](https://developers.google.com/maps/documentation/javascript/examples/circle-simple.md.txt) - [Rectangles](https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple.md.txt) - [Rectangle Zoom](https://developers.google.com/maps/documentation/javascript/examples/rectangle-zoom.md.txt) - [User-Editable Shapes](https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes.md.txt) - [Draggable Polygons](https://developers.google.com/maps/documentation/javascript/examples/polygon-draggable.md.txt) - [Listening to Events](https://developers.google.com/maps/documentation/javascript/examples/rectangle-event.md.txt) - [Ground Overlays](https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple.md.txt) - [Removing Overlays](https://developers.google.com/maps/documentation/javascript/examples/overlay-remove.md.txt) - [Custom Overlays](https://developers.google.com/maps/documentation/javascript/examples/overlay-simple.md.txt) - [Predefined Symbols (Marker)](https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined.md.txt) - [Custom Symbols (Marker)](https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom.md.txt) - [Animating Symbols](https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate.md.txt) - [Arrow Symbols (Polyline)](https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow.md.txt) - [Custom Symbols (Polyline)](https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom.md.txt) - [Dashed Line Symbols (Polyline)](https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed.md.txt) - [Draw on a map using Terra Draw](https://developers.google.com/maps/documentation/javascript/examples/map-drawing-terradraw.md.txt) ## Layers - [Data Layer: Polygon](https://developers.google.com/maps/documentation/javascript/examples/layer-data-polygon.md.txt) - [Data Layer: Simple](https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple.md.txt) - [Data Layer: Styling](https://developers.google.com/maps/documentation/javascript/examples/layer-data-style.md.txt) - [Data Layer: Event Handling](https://developers.google.com/maps/documentation/javascript/examples/layer-data-event.md.txt) - [Data Layer: Dynamic Styling](https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic.md.txt) - [Data Layer: Drag and Drop GeoJSON](https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop.md.txt) - [Data Layer: Earthquakes](https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes.md.txt) - [Heatmaps](https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap) - [Traffic Layer](https://developers.google.com/maps/documentation/javascript/examples/layer-traffic.md.txt) - [Transit Layer](https://developers.google.com/maps/documentation/javascript/examples/layer-transit.md.txt) - [Bicycle Layer](https://developers.google.com/maps/documentation/javascript/examples/layer-bicycling.md.txt) - [deck.gl ArcLayer](https://developers.google.com/maps/documentation/javascript/examples/deckgl-arclayer.md.txt) - [deck.gl ScatterPlot GeoJsonLayer](https://developers.google.com/maps/documentation/javascript/examples/deckgl-points.md.txt) ## Vector Map Features - [WebGL Overlays (Native API)](https://developers.google.com/maps/documentation/javascript/examples/webgl/webgl-overlay-simple.md.txt) - [WebGL Overlays (ThreeJS wrapper)](https://developers.google.com/maps/documentation/javascript/examples/webgl/threejs-overlay-simple.md.txt) - [Tilt and Rotation](https://developers.google.com/maps/documentation/javascript/examples/webgl/webgl-tilt-rotation.md.txt) ## 3D Maps - [Simple Map](https://developers.google.com/maps/documentation/javascript/examples/3d/simple-map.md.txt) - [Polygon](https://developers.google.com/maps/documentation/javascript/examples/3d/polygon.md.txt) - [Polyline](https://developers.google.com/maps/documentation/javascript/examples/3d/polyline.md.txt) - [Camera restrictions](https://developers.google.com/maps/documentation/javascript/examples/3d/camera-restrictions.md.txt) - [Places](https://developers.google.com/maps/documentation/javascript/examples/3d/places) ## MapTypes - [Basic Map Types](https://developers.google.com/maps/documentation/javascript/examples/maptype-base.md.txt) - [Overlay Map Types](https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay.md.txt) - [Image Map Types](https://developers.google.com/maps/documentation/javascript/examples/maptype-image.md.txt) - [Overlaying Image Map Types](https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay.md.txt) ## Services - [Geocoding Service](https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple.md.txt) - [Reverse Geocoding](https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse.md.txt) - [Reverse Geocoding by Place ID](https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id.md.txt) - [Geocoding Component Restriction](https://developers.google.com/maps/documentation/javascript/examples/geocoding-component-restriction.md.txt) - [Region Code Biasing (ES)](https://developers.google.com/maps/documentation/javascript/examples/geocoding-region-es.md.txt) - [Region Code Biasing (US)](https://developers.google.com/maps/documentation/javascript/examples/geocoding-region-us.md.txt) - [Elevation Service](https://developers.google.com/maps/documentation/javascript/examples/elevation-simple.md.txt) - [Showing Elevation Along a Path](https://developers.google.com/maps/documentation/javascript/examples/elevation-paths.md.txt) - [Street View Containers](https://developers.google.com/maps/documentation/javascript/examples/streetview-embed.md.txt) - [Street View Side-By-Side](https://developers.google.com/maps/documentation/javascript/examples/streetview-simple.md.txt) - [Overlays Within Street View](https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays.md.txt) - [Street View Events](https://developers.google.com/maps/documentation/javascript/examples/streetview-events.md.txt) - [Street View Controls](https://developers.google.com/maps/documentation/javascript/examples/streetview-controls.md.txt) - [Directly Accessing Street View Data](https://developers.google.com/maps/documentation/javascript/examples/streetview-service.md.txt) - [Custom Street View Panoramas](https://developers.google.com/maps/documentation/javascript/examples/streetview-custom-simple.md.txt) - [Custom Street View Panorama Tiles](https://developers.google.com/maps/documentation/javascript/examples/streetview-custom-tiles.md.txt) - [Maximum Zoom Imagery Service](https://developers.google.com/maps/documentation/javascript/examples/maxzoom-simple.md.txt) ### Directions (Legacy) - [Directions Service](https://developers.google.com/maps/documentation/javascript/examples/directions-simple.md.txt) - [Displaying Text Directions With setPanel()](https://developers.google.com/maps/documentation/javascript/examples/directions-panel.md.txt) - [Directions Service (Complex)](https://developers.google.com/maps/documentation/javascript/examples/directions-complex.md.txt) - [Travel Modes in Directions](https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes.md.txt) - [Waypoints in Directions](https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints.md.txt) - [Draggable Directions](https://developers.google.com/maps/documentation/javascript/examples/directions-draggable.md.txt) ### Distance Matrix (Legacy) - [Distance Matrix Service](https://developers.google.com/maps/documentation/javascript/examples/distance-matrix.md.txt) ## Libraries: Drawing - [Drawing Tools](https://developers.google.com/maps/documentation/javascript/examples/drawing-tools.md.txt) ## Libraries: Geometry - [Navigation Functions (JHeading)](https://developers.google.com/maps/documentation/javascript/examples/geometry-headings.md.txt) - [Encoding Methods](https://developers.google.com/maps/documentation/javascript/examples/geometry-encodings.md.txt) - [Polygon/Point Relationship With containsLocation()](https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation.md.txt) ## Address Validation - [Simple Address Validation](https://developers.google.com/maps/documentation/javascript/examples/address-validation.md.txt) ## Places (New) - [Text Search (New)](https://developers.google.com/maps/documentation/javascript/examples/place-text-search.md.txt) - [Nearby Search (New)](https://developers.google.com/maps/documentation/javascript/examples/place-nearby-search.md.txt) - [Place Details](https://developers.google.com/maps/documentation/javascript/examples/place-class.md.txt) - [Place Photos](https://developers.google.com/maps/documentation/javascript/examples/place-photos.md.txt) - [Place Reviews](https://developers.google.com/maps/documentation/javascript/examples/place-reviews.md.txt) - [AI-powered summaries](https://developers.google.com/maps/documentation/javascript/examples/ai-powered-summaries.md.txt) - [AI-powered summaries (simplified)](https://developers.google.com/maps/documentation/javascript/examples/ai-powered-summaries-basic.md.txt) - [Place Autocomplete Element (with map)](https://developers.google.com/maps/documentation/javascript/examples/place-autocomplete-map.md.txt) - [Place Autocomplete Element (no map)](https://developers.google.com/maps/documentation/javascript/examples/place-autocomplete-element.md.txt) - [Place Autocomplete Data API (simple)](https://developers.google.com/maps/documentation/javascript/examples/place-autocomplete-data-simple.md.txt) - [Place Autocomplete Data API (session)](https://developers.google.com/maps/documentation/javascript/examples/place-autocomplete-data-session.md.txt) - [Place Autocomplete Address Form](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform.md.txt) ## Places UI Kit - [Basic Place Autocomplete Map](https://developers.google.com/maps/documentation/javascript/examples/place-autocomplete-basic-map.md.txt) - [UI Kit Place Details](https://developers.google.com/maps/documentation/javascript/examples/ui-kit-place-details.md.txt) - [UI Kit Place Details Compact](https://developers.google.com/maps/documentation/javascript/examples/ui-kit-place-details-compact.md.txt) - [UI Kit Place Search Nearby](https://developers.google.com/maps/documentation/javascript/examples/ui-kit-place-search-nearby.md.txt) - [UI Kit Place Text Search](https://developers.google.com/maps/documentation/javascript/examples/ui-kit-place-search-text.md.txt) ## Places Service (Legacy) - [Place Searches](https://developers.google.com/maps/documentation/javascript/examples/place-search.md.txt) - [Place Details](https://developers.google.com/maps/documentation/javascript/examples/place-details.md.txt) - [Place Photos](https://developers.google.com/maps/documentation/javascript/examples/place-photos.md.txt) - [Place Search Pagination](https://developers.google.com/maps/documentation/javascript/examples/place-search-pagination.md.txt) - [Place Autocomplete](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete.md.txt) - [Place Autocomplete Hotel Search](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch.md.txt) - [Restricting Place Autocomplete to Multiple Countries](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-multiple-countries.md.txt) - [Places Search Box](https://developers.google.com/maps/documentation/javascript/examples/places-searchbox.md.txt) - [Retrieving Autocomplete Predictions](https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction.md.txt) - [Finding a Place ID](https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder.md.txt) ## React Google Maps Library - [Basic Map](https://developers.google.com/maps/documentation/javascript/examples/rgm-basic-map.md.txt) - [Place Autocomplete](https://developers.google.com/maps/documentation/javascript/examples/rgm-autocomplete.md.txt) - [Extended Component Library](https://developers.google.com/maps/documentation/javascript/examples/rgm-college-picker.md.txt) ## Fun - [Map Puzzle](https://developers.google.com/maps/documentation/javascript/examples/puzzle.md.txt)