Places UI Kit | Google Maps Platform Start building in seconds without a credit card with Maps Demo Key. Learn more Introducing new AI-powered products and tools from Google Maps Platform. Learn more New! Subscribe to save with one monthly price and access more products. Learn more Google Maps Platform Skip to contentMenu Close AI Arrow down Products Arrow down Solutions Arrow down Pricing Arrow down Resources Arrow down Why Google AI Arrow down AI Products Products Tools Tools Explore AI Explore AI Products ProductsBuild powerful experiences with AI solutions. Back Google EarthCombine iconic imagery with professional-grade geospatial data, no-code tools, and Gemini capabilities. Geospatial AnalyticsEasy-to-use geospatial datasets and AI-powered tools. Grounding LiteBring fresh Maps data to any LLM via the Model Context Protocol (MCP). Grounding with Google MapsImprove AI responses with Gemini, AI Studio, and Agent Platform. Maps Agentic UI Toolkit (Experimental)Build interactive Maps experiences into agentic applications. Maps Imagery Grounding (Private Preview)Create generative media grounded in physical reality. Place, area, and review summariesGet an AI-generated summary of a place with Place Details. Explore AI Featured Add Maps experiences to agentic applications with Maps Agentic UI Toolkit Learn more about powering the next era of agentic experiences announcing new grounding capabilities Featured Add Maps experiences to agentic applications with Maps Agentic UI Toolkit Learn more about powering the next era of agentic experiences announcing new grounding capabilities Tools ToolsDevelop faster and smarter with AI. Back Code Assist Toolkit (opens in a new tab)Ground your AI assistant in the official, up-to-date resources. Maps Styling agent (opens in a new tab)Generate customized map styles in AI Studio. Route Optimization agentOptimize your fleet route plan with an AI agent. Explore AI Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Products Arrow down APIs & SDKs Maps Maps Routes Routes Places Places Environment Environment Analytics Datasets Datasets & Models Tools Tools See all products Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. See all products Maps MapsHelp users explore the world with detailed, custom map products. Back 3D MapsCreate 3D photorealistic maps easily. Aerial ViewDelight your users with pre-rendered, 3D cinematic video of points of interest and their surroundings. Dynamic MapsCustomize and style interactive maps using Cloud-based maps styling for real time updates across all devices and platforms. Dynamic Street ViewEmbed real-world imagery with 360° panoramas. ElevationProvide a simple interface to query locations on the earth for elevation data. Map TilesDesign interfaces and interactions unique to your brand and design requirements, and customize your visualizations. Maps EmbedAdd an interactive map or Street View panorama to your site, using a simple HTTP request. Photorealistic 3D TilesAccess a 3D mesh model of the real world and use the renderer of your choice to create cinematic experiences. Static MapsEmbed simple map images on your website with minimal code. Static Street ViewEmbed a static (non-interactive) Street View panorama or thumbnail into your web page, without the use of JavaScript. Street View TilesUse images taken from street level and tile metadata to create powerful, immersive experiences. See all products Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. Routes RoutesHelp your users optimize the way from A to Z. Back Compute RoutesProvide directions for transit, biking, driving, 2-wheel motorized vehicles, or walking between multiple locations. Compute Routes MatrixCalculate travel times and distances for multiple destinations for up to 625 route elements. Navigation ConnectAllow your drivers to use Waze or Google Maps for navigation, while you receive the essential trip information needed to manage your operations. Navigation SDKAdd custom Google Maps navigation into your mobile app. RoadsDetermine the route a vehicle travels. Route OptimizationOptimize multi-stop routes for one or more vehicles flexibly and intelligently. See all products Featured Choose from subscription plans that make pricing easy and predictable Learn more about pricing Featured Choose from subscription plans that make pricing easy and predictable Learn more about pricing Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. Places PlacesShow users places and points of interest with details at their fingertips. Back Address ValidationValidate an address and its components, standardize the address for mailing, and determine the best known geocode for it. AutocompleteHelp users quickly find the exact place they’re looking for by automatically suggesting businesses and points of interest as they type. GeocodingConvert addresses to geographic coordinates or the reverse. GeolocationReturn the location of a device without relying on GPS, using geospatial data from cell towers and WiFi nodes. Grounding with Google MapsBuild factual and up-to-date Gen-AI powered experiences by grounding your LLM responses in Google Maps data. Isochrones APIGenerate precise, traffic-aware reachability polygons. Supports driving, walking, cycling, & transit modes with travel limits up to 120 minutes. Maps Grounding LiteQuickly bring fresh Maps data to any LLM using the Model Context Protocol. Nearby SearchSearch for places within a specified area with the option to refine by place type. Place DetailsAdd rich details for millions of places to your website or app. Place PhotosAccess millions of place-related photos stored in Google's Places database. Places AggregateGet specific insights to improve user experience for users discovering or researching an area. Places UI KitBring the familiar Google Maps UI for Places to your front-end applications with just a few lines of code. Text SearchProvide information about a set of places based on a single search query and any specified location. Time ZoneGet the time zone for a specific latitude and longitude coordinate. See all products Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. Environment EnvironmentHelp users access data to respond to climate challenges. Back Air QualityReduce users’ exposure to air pollution with air quality data and insights. PollenImprove daily life for allergy sufferers with up-to-date information on different types and levels of pollen. SolarUse advanced data and imagery to create more advanced solar array designs and proposals, while eliminating costly site visits. WeatherUse advanced, trusted weather forecasts to help people plan and prepare. See all products Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. Datasets Datasets & ModelsComprehensive integrations for unparalleled knowledge. Back Explore geospatial analytics Aerial and Satellite InsightsScale operations and insights with high-resolution overhead imagery and AI solutions. Aerial and Satellite ModelsApply Google’s state-of-the-art geospatial AI to your own proprietary imagery. Places InsightsSecurely combine your geospatial data with Google Maps’ rich POI data using Places Insights in BigQuery. Population Dynamics InsightsTrain better predictive models with datasets derived from Google Search, maps, and weather trends. Roads Management InsightsOvercome the limitations of traditional traffic data collection methods and proactively respond to congestion and traffic issues. Street View InsightsStreamline operations and improve workflows with AI-powered insights, using Google Maps Platform imagery integrated with BigQuery and Gemini Enterprise Agent Platform. See all products Featured Introducing new pricing subscriptions featuring our most popular APIs Learn more about pricing Featured Introducing new pricing subscriptions featuring our most popular APIs Learn more about pricing Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. Tools ToolsReach your sustainability and business goals Back Google EarthAnalyze, build, and collaborate to make decisions with a comprehensive, interactive model of our world. Earth Engine (Google Cloud) (opens in a new tab)Explore a multi-petabyte catalog of satellite imagery and geospatial datasets with planetary-scale analysis capabilities. See all products Featured Introducing new pricing subscriptions featuring our most popular APIs Learn more about pricing Featured Introducing new pricing subscriptions featuring our most popular APIs Learn more about pricing Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more. Solutions Arrow down Solutions Use Cases Use cases Industries Industries Find your solution Find your solution Use Cases Use casesFind the right combination of products to achieve your goals. Back Build interactive experiencesCreate exciting, immersive experiences. Display the ideal locationCreate maps for customers to find stores and ATMs. Enable asset trackingTrack and visualize moving assets for any fleet size. Enrich transactionsHelp customers recognize and understand transactions. Improve addressesHelp users enter and validate addresses for sign-up. Offer efficient routesQuickly and efficiently route people or goods. Provide local informationHelp users understand nearby places. Visualize geospatial dataDisplay geospatial and business data to improve decisions. Explore & select sitesUse Google Earth imagery and data to make decisions. Analyze geospatial dataAccess geospatial insights with comprehensive data. Collaborate & shareWork with your team to create engaging map presentations. Ground AI responsesEnhance AI response accuracy with data on 250M+ global places. Find your solution Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Industries IndustriesFind the right combination of products to achieve your goals. Back Financial ServicesEnhance experience, reduce risk, and boost efficiency. RetailBuild engaging retail experiences that make shopping easy. Real EstateHelp buyers explore neighborhoods with map-based tools. Transportation & LogisticsTransform trips and track assets with geospatial data. Find your solution Featured Explore both easy subscription and flexible pay-as-you-go pricing Learn more about pricing Featured Explore both easy subscription and flexible pay-as-you-go pricing Learn more about pricing Pricing Arrow down Pricing Products and Services Products & Services Products and Services Products & ServicesGoogle Maps Platform has flexible pricing to meet any need and budget. Back Pay as you goPricing that puts you fully in control with our products. Subscribe to saveChoose from 3 plans for our most popular products at one price. Google EarthPricing for multiple Google Earth plan levels. Featured Choose from subscription plans that make pricing easy and predictable Learn more about pricing Featured Choose from subscription plans that make pricing easy and predictable Learn more about pricing Resources Arrow down Resources Development Development Education Learn Community Community Support Development DevelopmentGet the tools and information to help you use Google Maps Platform. Back Architecture Center (opens in a new tab)Discover use cases and architectures to help build apps. Documentation (opens in a new tab)The details developers need to build with the real world. Partner directory (opens in a new tab)Select a reliable Google Cloud partner to work with you. Trust CenterGoogle Maps offers security, audits, and compliance. Solution FinderHere’s how to start discovering your solution. Maps Demo KeyGo from sign-in to prototype in seconds with no credit card. Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Featured Start building in seconds with a Maps Demo Key — no credit card required Learn more about maps demo key Education LearnLearn about new products, features, and projects. Back BlogExplore product announcements and real-world applications. Customer storiesLearn how your industry uses Google Maps to engage and grow. Documentation (opens in a new tab)The details developers need to build with the real world. Demo GallerySee how you can make our next-generation maps your own. Webinars (opens in a new tab)Stay updated on new products and expert advice. WhitepapersInsights and solutions driving change across industries. Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Community CommunityExplore and join the people who build with Google Maps Platform every day. Back Discord (opens in a new tab)Get in on the developer conversation. GitHub (opens in a new tab)Access open source libraries and tools. YouTube (opens in a new tab)Learn more about what’s new and noteworthy. Google Maps Platform AwardsSubmit your best projects for recognition and prizes. Google Maps Platform Innovators (opens in a new tab)Join to get access to early features and exclusive resources Featured Introducing new pricing subscriptions featuring our most popular APIs Learn more about pricing Featured Introducing new pricing subscriptions featuring our most popular APIs Learn more about pricing SupportGet the help you need while building with Google Maps Platform. Back Support resources (opens in a new tab)Access support resources or contact the support team. Open a case (opens in a new tab)Create a support case. Support plans (opens in a new tab)Learn about our customer support plans. Status dashboard (opens in a new tab)Check the health dashboard for incidents. Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Featured Power your geospatial development with AI from Google Maps Platform Learn more about ai Why Google Contact salesCreate an account Contact salesCreate an account Places UI Kit Essentials Pro Easily add place content to any map Add Google Maps UI for Places to any map with minimal code to let users discover and explore locations. Try for free JSAndroidiOS Test Places UI Kit in seconds Enhance your maps with Places data with a Maps Demo Key, no credit card required. Prototype with confidence in a controlled sandbox without financial obligation. Try for free Elevate your front-end experiences Add 250M+ places to your apps with a ready-to-use component library, powered by fresh and factual Google Maps data. Low-code development Because you can get started with a few lines of code, Places UI Kit helps you focus less on development and more on user experience. Use with any map of your choice Places content is detailed and regularly updated regardless of the map you choose to build on. A low-cost option for adding Places Achieve more with your budget in a cost-effective way by using Places UI Kit for your front-end development. Easily deliver tailored UI for a custom experience Each component allows for visual, layout, and functional customization so you can tailor the look and feel to your app’s branding while maintaining the trusted Google UX that users know. Custom Default Interactive Map: Explore using custom and default Places information UI elements View code Add the familiar Places content to any map Help users discover more with information on 250M+ places with any map of your choice. Integrate Google Maps UI into cross-platform experiences from websites to native mobile applications. View code Product demo Try the Places UI Kit interactive demo Empower users to make informed decisions with Places UI Kit. Seamlessly integrate rich, on-brand place content, on or off the map, using our flexible, cost-effective UI components and custom styling tools. Explore demo Interactive Map: Explore using Place Search and Place Details components on a 3D Map. View code What’s included in Places UI Kit? Place Details component Place Search component Places Autocomplete component 1 2 3 PreviousNext Place Details code snippet Available in JavaScript, iOS, and Android. Visit documentation to learn more. Copy code Enable Places UI Kit // JavaScript await google.maps.importLibrary("places"); // HTML <gmp-place-details-compact orientation="vertical"> <gmp-place-details-place-request place="ChIJXwQss4Rw44kRHit4Nd0i2Bk"> </gmp-place-details-place-request> <gmp-place-content-config> <gmp-place-address></gmp-place-address> <gmp-place-rating></gmp-place-rating> <gmp-place-type></gmp-place-type> <gmp-place-price></gmp-place-price> <gmp-place-opening-hours></gmp-place-opening-hours> <gmp-place-website></gmp-place-website> <gmp-place-phone-number></gmp-place-phone-number> <gmp-place-summary></gmp-place-summary> <gmp-place-reviews></gmp-place-reviews> <gmp-place-media></gmp-place-media> <gmp-place-attribution></gmp-place-attribution> </gmp-place-content-config> </gmp-place-details-compact> // CSS --gmp-button-border-color: #ff3923; --gmp-button-border-width: 1px; --gmp-mat-color-info: #000; --gmp-mat-color-on-secondary-container: #ff3923; --gmp-mat-color-on-surface-variant: #000; --gmp-mat-color-on-surface: #ff3923; --gmp-mat-color-positive: #ff8041; --gmp-mat-color-primary: #000; --gmp-mat-color-secondary-container: #fff; --gmp-mat-color-surface: #fff; --gmp-mat-font-body-medium: normal 500 0.875em/1.25em var(--gmp-mat-font-family, 'Playfair Display'); --gmp-mat-font-body-small: normal 400 12px/16px var(--gmp-mat-font-family, 'Playfair Display'); --gmp-mat-font-family: 'Playfair Display', serif; --gmp-mat-font-label-large: normal 500 14px/24px 'Google Sans'; --gmp-mat-font-title-small: normal 600 1.25em/1.45em var(--gmp-mat-font-family, 'Playfair Display'); Place Details code snippet Available in JavaScript, iOS, and Android. Visit documentation to learn more. Copy code Enable Places UI Kit // JavaScript await google.maps.importLibrary("places"); // HTML <gmp-place-details-compact orientation="horizontal"> <gmp-place-details-place-request place="ChIJ-Uz1sVhYwokR1PkuiOXdwrI"></gmp-place-details-place-request> <gmp-place-content-config> <gmp-place-rating></gmp-place-rating> <gmp-place-type></gmp-place-type> <gmp-place-price></gmp-place-price> <gmp-place-opening-hours></gmp-place-opening-hours> <gmp-place-website></gmp-place-website> <gmp-place-phone-number></gmp-place-phone-number> <gmp-place-summary></gmp-place-summary> <gmp-place-reviews></gmp-place-reviews> <gmp-place-accessibility></gmp-place-accessibility> <gmp-place-media></gmp-place-media> <gmp-place-attribution></gmp-place-attribution> </gmp-place-content-config> </gmp-place-details-compact> Interactive demo code snippet Visit documentation for Places UI Kit and Photorealistic 3D Maps in Maps JavaScript to learn more. Copy code Enable Places UI Kit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { margin: 0; height: 100vh; } gmp-place-search { position: absolute; inset: 30px auto auto 30px; width: 400px; --gmp-mat-font-title-medium: 400 12px / 14px Garamond; --gmp-mat-color-on-surface: #e37400; } gmp-popover { --gmp-popover-pixel-offset-y: -48px; } gmp-place-details-compact { width: 350px; --gmp-mat-color-on-surface: #e37400; } </style> <title>Places UI Kit Interactive Snippet</title> </head> <body> <gmp-map-3d center="21.27655,-157.82663" mode="satellite" range="1500" tilt="73" heading="38"> <gmp-popover altitude-mode="relative-to-mesh"> <gmp-place-details-compact orientation="horizontal"> <gmp-place-details-place-request></gmp-place-details-place-request> <gmp-place-standard-content></gmp-place-standard-content> </gmp-place-details-compact> </gmp-popover> </gmp-map-3d> <gmp-place-search selectable> <gmp-place-all-content></gmp-place-all-content> <gmp-place-nearby-search-request max-result-count="5" included-primary-types="restaurant" location-restriction="1500@21.27655,-157.82663"> </gmp-place-nearby-search-request> </gmp-place-search> <script> const map3d = document.querySelector('gmp-map-3d'); const placeSearch = document.querySelector('gmp-place-search'); const popover = document.querySelector('gmp-popover'); const detailsRequest = document.querySelector('gmp-place-details-place-request'); async function initMap() { await google.maps.importLibrary("places") const {Marker3DInteractiveElement, AltitudeMode} = await google.maps.importLibrary("maps3d"); // On click, reposition the popover anchor and pass the ID for the search request. const handleClick = (place) => { detailsRequest.place = place.id; popover.positionAnchor = place.location; popover.open = true; } // Create clickable markers when the search results are loaded. placeSearch.addEventListener('gmp-load', (e) => { for (const place of e.target.places) { const marker = new Marker3DInteractiveElement({ position: place.location, extruded: true, drawsWhenOccluded: true, altitudeMode: AltitudeMode.RELATIVE_TO_MESH }) marker.addEventListener("gmp-click", () => handleClick(place)) map3d.append(marker); } }); // Open a popover at the place's location when clicking a list entry. placeSearch.addEventListener('gmp-select', ({place}) => handleClick(place)); } (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "<YOUR_API_KEY>", v: "beta" }); initMap() </script> </body> </html> Use Cases See the possibilities for your business Help buyers and renters get the vibe of a neighborhood Empower buyers and renters to make informed decisions by providing neighborhood insights for properties. Increase showing requests by giving buyers immediate, immersive answers to their location questions. Show tourists and travelers places nearby Enable discovery and exploration of restaurants, bars and other attractions near a holiday rental or a hotel. Plus, help users compare options, plan itineraries, and book faster. Bring Places search and discovery experiences to your messaging app Build even more engaging experiences for your users in-app by using a combination of the various components within the Places UI Kit. 1 2 3 PreviousNext Start building with Places UI Kit Get started JSAndroidiOS Frequently asked questions How is Places UI Kit different from our other Places API product? Places UI Kit is a low-code, cost-effective way to bring Google's Places content to your application with any map of your choice. It has pre-configured visual elements, which you may customize to support front-end visualization use cases. Places API provides the content that you can use to build custom use cases for front-end and back-end applications. You can use them together to maximize your ROI. What platforms are supported by Places UI Kit? Places UI Kit is available through the Maps JavaScript, iOS and Android SDKs. It’s helpful for both single- and multi-platform developers and enables you to build consistent experiences for your users. How easy is it for a developer to get started? The component library lets you bring the familiar Google Maps user experience for Places to your apps and web pages with minimal code for JavaScript, iOS, and Android SDKs. Documentation is available for getting started. Can I use Places UI Kit with other Google Maps Platform APIs? Because the Places UI Kit components use Place IDs, they are able to be combined with the Places API and other Google Maps Platform APIs. How is Places UI Kit different from our other Places API product? Places UI Kit is a low-code, cost-effective way to bring Google's Places content to your application with any map of your choice. It has pre-configured visual elements, which you may customize to support front-end visualization use cases. Places API provides the content that you can use to build custom use cases for front-end and back-end applications. You can use them together to maximize your ROI. How easy is it for a developer to get started? The component library lets you bring the familiar Google Maps user experience for Places to your apps and web pages with minimal code for JavaScript, iOS, and Android SDKs. Documentation is available for getting started. What platforms are supported by Places UI Kit? Places UI Kit is available through the Maps JavaScript, iOS and Android SDKs. It’s helpful for both single- and multi-platform developers and enables you to build consistent experiences for your users. Can I use Places UI Kit with other Google Maps Platform APIs? Because the Places UI Kit components use Place IDs, they are able to be combined with the Places API and other Google Maps Platform APIs. Discover related products See all products Place Details essentials pro enterprise Add rich details for millions of places to your website or app. Learn more AndroidiOSAPI Autocomplete essentials pro Help users quickly find the exact place they’re looking for by automatically suggesting businesses and points of interest as they type. Learn more AndroidiOSJSAPI Nearby Search pro enterprise Search for places within a specified area with the option to refine by place type. Learn more JSAPI Places Aggregate pro Get specific insights to improve user experience for users discovering or researching an area. Learn more API Place Photos enterprise Access millions of place-related photos stored in Google's Places database. Learn more AndroidiOSAPI Text Search essentials pro enterprise Provide information about a set of places based on a single search query and any specified location. Learn more JSAPI 1 2 3 4 5 6 PreviousNext Get going with
Google Maps Platform Get startedContact sales *Free usage refers to monthly calls available at no cost. Essentials Map Tiles APIs provide up to 100,000 calls at no cost per SKU per month. Product availability, functionality and terms may differ for customers with billing addresses in the European Economic Area (EEA). Learn more Follow us Helpful links Helpful links Documentation FAQs Keep up with the latest Keep up with the latest Subscribe to the Google Maps Platform newsletter today to receive product updates, insights, news, and more. Yes, sign me up to receive communications from Google Maps Platform and Google Cloud. Your information will be used in accordance with Google's privacy policy. You may opt out at any time. Thanks for signing up A welcome email should be in your inbox soon. About Google Google products Privacy Terms Google Maps Platform Terms Help Deutsch (Deutschland) English English (India) English (United Kingdom) español (México) Français (France) italiano polski português (Brasil) हिन्दी 한국어 中文 中文(台灣) 日本語