Build 3D Maps in JavaScript and use Gemini models in Places to create AI apps

Summary

Highlights

• Access Google's photorealistic 3D maps seamlessly via the JavaScript API 🌐.
• No added complexities—just one line of code to start using advanced 3D mapping 🧩.
• Empower your app with AI through the Places API—now featuring generative summaries 🤖.
• Enjoy effortless integration of 3D features and AI capabilities to boost user engagement 🚀.
• The Places API's AI-driven features save users time by providing concise place descriptions 🕒.

Key Takeaways

• Embrace photorealistic 3D maps using a new mesh renderer via Google Maps' JavaScript API 🗺️.
• Create immersive experiences effortlessly with Google's rendering technology, requiring just one line of code 🎨.
• Utilize Gemini model's AI-powered summaries to simplify finding places with enhanced insights and data freshness 🌟.
• Animated demos highlight the power of new 3D and AI capabilities, promising rich user experiences 🌍.
• The new features cater to diverse fields—from travel and real estate to automotive and more, showcasing versatility 🚗.

Overview

Build 3D Maps in JavaScript and use Gemini models in Places to create AI apps Transcription

• 00:00 - 00:30 hello everyone my name is Travis mcf and I'm the engineering lead for maps and immersive experiences within Google Maps platform I hope you're all having a great IO I'm here today to talk about how you can bring Google's Advanced 3D geospatial imagery and generative AI capabilities to your applications in this session you will learn how to quickly create and customize 3D experiences in the maps JavaScript script API and how to build
• 00:30 - 01:00 Innovative AI powered applications using our places data let's get started last year at IO we walked you through two major components of photorealistic 3D experiences and launched two products to support these components the first component was a photorealistic textured 3D mesh which is the foundation for 3D experiences to give you access to this mesh we launched photorealistic 3D Tils through the map
• 01:00 - 01:30 tiles API photorealistic 3D tiles enable developers to create powerful visual experiences using a render of your choice the second component was a pre-built 3D visualization experience which we launched through the aerial view API aerial view gives you access to pre-rendered 3D cinematic videos to support glass use cases or immersive experiences on devices with low power graphics Hardware now if you remember I
• 01:30 - 02:00 conveniently left out the third component the software that brings interactive 3D experiences to life a Google powered renderer well today I'm thrilled to share that we are launching the third component for JavaScript Maps developers the mesh renderer starting today you can access Google's photo realistic 3D maps through the same Maps JavaScript API you already use for the first time you can take advantage of Google's proven rendering technology to deliver Rich 3D maps at
• 02:00 - 02:30 the speed your users expect and the best part is that you can get started with just one single line of code let me now hand over to our lead engineer on this project Ali to walk you through a demo s Tris hi everyone I'm Ali software engineer on the Google Maps platform team when I talk to Maps developers being able to access any earthlike Real
• 02:30 - 03:00 World experience has been one of their top feature requests that's why I'm so excited to announ the experimental release of photo realistic 3D maps in the maps JavaScript API starting today you get access to Google surrendering capabilities and can quickly visualize over 2500 cities in over 50 countries at City to Globe scale now let's walk through how to get started and look at the key components that you can experiment
• 03:00 - 03:30 today let's start in the console if you already use maps JavaScript API you can access 3D maps through the same service no extra steps needed if you're new to Google Maps platform just enable the maps JavaScript API in the Google Cloud console and you're ready to start using 3D maps now getting access to all of the functionality starts with just one line of code first we need to load the maps jar API on the page
• 03:30 - 04:00 the simplest way to do that is by using a script tag that includes your API key you'll also need to include the Maps 3D library to make 3D maps available in your app like other features in the GPI 3D map was designed as a web component a custom and usable HTML element which can be created either through HTML or JavaScript the next step is to add a map element to the page using the GMP map 3D
• 04:00 - 04:30 tag all you need to do is to add it to the place you wish the 3D map to appear here you can see the 3D map centered on the Amal Coast in Italy in order to create this view we need to set a few attributes on the map 3D element first we set the center point to the center of the screen including the height above the ground in meters next we set the distance away from the point we want to look at
• 04:30 - 05:00 using the range whe again in Metter last it's set the angle from the ground you want to view from using the Tilt well with all those attributes set up we now have a work in 3D map on the page we can interact with it like a normal 2D map including panning and zooming around the area and we see all of the rich places information that's automatically integrated into the 3D base map you can use JavaScript to
• 05:00 - 05:30 automatically control the view move to New locations or modify the look of the globe let's have a look at how to do some of that now so we are looking at the MF coost pretty amazing right but let's say we want to explore somewhere totally different we can do that with just a few simple lines of code first we need to find the map 3D element and update its properties to change where it's pointed at we can call this function from any button added to the page
• 05:30 - 06:00 by the way there are other ways to adjust Maps view like setting the roll we won't dive into that today but know that you have lots of option to control your 3D map once we have the full page we'll head to Toronto with a single click moving around the globe in an instant really allow you suit to create new reach immersive experiences that were not possible in the map JavaScript API before while it's fine to explore the globe you might might also want to
• 06:00 - 06:30 create Focus experiences for your users camera limits and map boundaries can be defined when creating the map 3D element there you can set the maximum or minimum vales for tilt or altitude so users navigate within the trange you can also set the balance of the map through code to keep your users engaged in a specific area now we can see how to manipulate the location of the map is Javascript before we add features to the map we
• 06:30 - 07:00 might want to remove some of the base map elements like borders Roads places and labels this lets your users just focus on the 3D features and added elements without distraction to do this we added default labels disabled HTML attribute to the tag we can also have a small JavaScript code to toggle this attribute on or off when required here we can see it added to the map 3D element centered in Toronto and how the looks after loading the
• 07:00 - 07:30 map now that we are happy with this view let's go ahead and start drawing on top of the map adding lines and shape to the map can help highlight specific areas of Interest or convey information to your users let's start by highlighting an area interrent using a polygon we first need to add a polygon to the map 3 element and set the style we can Style Both the area and the line around it in different colors as as well as make both of them a pack in
• 07:30 - 08:00 order to see the underlying real world features in the view note that apart from The Styling features we also have the draw secluded segments attribute which can be used to show whether to view parts of an object that might be behind other features next we add coordinates and Define the altitude mode for this polygon so that it can be positioned properly looks really cool right
• 08:00 - 08:30 now let's say we want to highlight a building instead top to bottom given its altitude we can do that with a few additional modifications first we need to make sure the polygon has the extruded attribute associated with it which then tells the view to use the altitude values of this feature we then change the altitude mode on the polygon to either absolute or relative to mesh depending upon the nature of the height values in this is the vales are above
• 08:30 - 09:00 the ground to cover the landmark that we are highlighting and here's our final polygon around the C Tower in dense areas like cities adding a third dimension is an easy way to highlight key elements that might otherwise blend into the 3D landscape this approach can also be used for Polar lines here we can see a route across Toronto obtained from the route API which is rendered on the 3D map using the polar line
• 09:00 - 09:30 element once again we specify the polar line points to give it shape and then the height of each point there's a great deal of flexibility Vis both the polygon and polar line elements so you can easily customize the look and feel to match your style preferences so you can imagine where you might take this next following the route this simple polar line quickly transforms into Dynamic data driven
• 09:30 - 10:00 experience by visualizing real-time traffic information and guiding viewers through the city I hope you've already started imagining ways to bring your own 3D experiences to life we are excited to share these capabilities with you today but it's your input in creativity that will really take things to the next level I look forward to seeing all the amazing 3D experiences you built with the maps JavaScript API that's it from me back to you Travis
• 10:00 - 10:30 thank you Ali with this launch we are offering you even more choice to pick a 3D solution that best fits your needs whether you want to use your own renderer or leave the rendering to us we have you covered and we have a fantastic demo along with a great set of docs and Sample codes to help you get started now let's switch gears to one of our most beloved products places API for the first time ever we are starting to bring the advanced reasoning and generation capabilities from the
• 10:30 - 11:00 Gemini model to features of our place's API now you can build AI powerered applications that make it easier for users to find the exact places they're looking for without having to comb through countless reviews photos and place attributes I'm excited to announce that these generative AI capabilities for places API are now available to all developers worldwide as an experimental release they are initially available for places data in the US and will expand to
• 11:00 - 11:30 other countries over time the AI powered capabilities for places API enable you to provide Rich generative summaries that highlight the most helpful information about a place or area utilizing more insightful Place data and contributions from Google Maps users than the places API has ever done before this saves your users time and effort to search for and select where they want to go and it also saves you development time and resources now
• 11:30 - 12:00 you can help your users find just what they are looking for and do it much more quickly through comprehensive and insightful generative summaries whether it's finding the best takaria in the gas lab District of San Diego or the best Italian restaurant in the East Village neighborhood of New York you can now make it super easy for your users to find the ideal places to visit you can also help your users make decisions about what Boutique Hotel to stay at in Chicago based on AI power powered summaries of which restaurants
• 12:00 - 12:30 nightlife and attractions are within walking distance of the hotel saving them time these capabilities enable use cases across many verticals such as travel real estate Auto retail social media and more let's take a look at a demo showcasing how these capabilities can be used by automakers imagine a driver is in one of your vehicles driving from San Francisco to South Lake Tahoe and wants to a detour to get dinner this is a situation
• 12:30 - 13:00 that normally requires an involved search and selection process to find a restaurant that is convenient to their route has the type of Cuisine they're in the mood to eat and has good reviews but they're driving and need to keep their attention on the road this is where the new Gemini model capabilities for our place's API really Shine using the driver search query the navigation system can find the ideal location based on the type of place the driver is looking for we return all the data
• 13:00 - 13:30 you're used to getting in a place of search things like ratings reviews photos and hours of operation but now we also return a summary of that same data created by the Gemini model which is more useful for making quick decisions while driving let's see how it works find me a Mexican restaurant I found Ken's Taria Danville here's a summary of this place casual Mexican eery serving tacos burito and other traditional fair
• 13:30 - 14:00 plus Margaritas this is an example of an overview Place summary which provides a oneline description of the place these summaries are brief and to the point helping the driver get a quick sense of what a place is like without needing to comb through a bunch of place attributes we generate them for a variety of place types with much higher coverage in data freshness than human generated summaries in places API for restaurants that have a good base of user generated content such asie views and photos you can now provide AI
• 14:00 - 14:30 powered descriptive Place summaries these surface the most helpful insights about a restaurant such as popular dishes flavors value and service quality descriptive play summaries can be up to 650 characters and provide our richest and most helpful places information ever located in The Crossroads shopping center this branch of a Mexican restaurant chain offers classic dishes for dinein takeout and delivery the menu features Mexican Staples like burritos
• 14:30 - 15:00 tacos and margaritas people mention the happy hour the large portions and the outdoor seating the venue has a bar and some say the service is fast customers typically spend $10 to $20 as you can see these generative summaries help you enable your drivers to quickly understand what a place is like and how it's Unique from other nearby options without having to pull over to comb through a large number of reviews and photos finally let's imagine the the driver is looking for the ideal charging
• 15:00 - 15:30 station to charge their EV with the new places API you can offer data for EV charging stations this means your drivers can optimize their driving based on charging station information like which stations are available the type of connector charging station accommodates and Max charging speed at each station and now we are introducing area summaries which are helpful AI power descriptions of the area surrounding a place this can be especially useful when
• 15:30 - 16:00 you're looking for specific recommendations of what shopping restaurant and coffee shops are available within a short walking distance for example the driver and their passengers may want to eat something while they charge so they'll need to know what restaurant options are available within a short walk our new area summaries enable you to help them decide just that let's take a look within a 1 to 3 minute walk there are several dining and grocery options including In-N-Out Burger cabila
• 16:00 - 16:30 Restaurant Panda Express and Sprouts Farmers Market for coffee and other beverages consider Starbucks or Pete's Coffee and last but not least contextual search results provide information in text search results such as specific photos and reviews that give context on why certain search results were picked this enables you to give your users more confidence in your place search results for example if a driver searches for a dog friendly restaurant we can provide Place photos with the search results
• 16:30 - 17:00 that show relevant photos of dogs at the restaurant you can try the new Gemini model capabilities and places API at no cost during the experimental phase to get started visit the documentation for the new places API thanks again for joining Al me today and do not forget to check out our documentation and developer site to keep up toate on available tutorials News videos and more and as always we need your buck reports your feature requests and your feedback to help us test and improve upon our
• 17:00 - 17:30 offering so please submit them through the public issue tracker listed here again I'm Travis mafell and we hope you'll give these new Google Maps platform products a try we can't wait to see what you build have a great IO everyone [Applause]