[00:00] In this lesson, I'll demonstrate how to use and configure the Google Map component that was added to Perspective. The Google Map can be found in the Perspective Component Palette under Display. When I first drag the component onto one of my views, I'll see a message telling me that this page can't load Google Maps correctly. That's because it requires an API key to function properly, and this is something that you'll have to get from Google. I have my API key ready, so now I can head over to the Perspective session props, and if I scroll down, I can paste it into the googleMapsApiKey prop here. I'll head back over to my view and now my component is working properly. The component is a new interactive map alternative to the existing Perspective leaflet map. However, this one uses the Google Maps API and allows for additional scriptable interactions and layer configurations. If I look at the list of properties for the Google Map, I can configure the initial state and location that the map will load with. I can modify the appearance of the cursor when the map is draggable or being dragged.

[01:05] I can expose the end user controls, for example, I can display or hide the button to make the map full screen or to zoom in or out. Also, if I want to control the bounds of the map, that's something I can specify with the north, east, south, west coordinates in the restriction object, and that will restrict the map within those boundaries. The Google Maps API allows for the configuration of many different layers, such as markers, shapes, and bike, traffic, or transit paths. I'll copy and paste a quick example into my props and you'll see that there's now a marker with a filled in circular area and invisible bike paths. On top of this, there's also KML layers that allow you to configure clickable icons across the map with additional data. This works by specifying a URL to A KML file that will be parsed for rendering. Check out the Google developer docs for more information on those as well as some examples.

[02:04] In addition, I can add bindings to these properties to further customize or control the behavior or appearance of the map. For example, I could bind the maptype ID to my dropdown to give users the ability to interact with my view to change whether this displays a roadmap or a satellite image. But I could also do things like bind coordinates of the initial state of the map to a tag. It can be bound to the results of a database query, or it can also be controlled by end users to possibly view the location of different sites around the globe. Even more customization can be achieved through the numerous events tied to this component. You can trigger popups to open or scripts to fire on anything from the map bounds updating to each individual kind of layer being clicked, dragged, or loaded. To reference the full list of properties and scripting functions available for this component, check out the pages in our user manual, which I'll link below the video.