Welcome back.
In this video we're going to create a custom info window for every marker on the map.
So for example if you create a new marker on the map, click on it and new custom info window being
displayed.
To do so, we need to create a variable called Selected marker.
This is a selected marker by.
Remember it's a mutable state of lat long and initialized as well.
So this is the selected marker.
The general selected marker, and we make it as a new variable mutable state of lat long.
And this is outside the box and outside the Google map scope.
Okay.
So make sure that it's included inside the set content.
Then inside the Google map parameters we need to modify the on map click we create.
If you remember we create markers by two ways.
If you tap on the marker on the map, you create a red marker, and if you long click on the map, you
will create a new marker.
And it's in blue.
Okay so we have two ways on map click and on map long click here.
We need to create and assign the selected marker to marker dot or my lat long dot position.
Or you can directly assign them the selected marker equals to my left long.
Also, you can set it to true to consume the event also on a map along a click.
We have created the animation to the camera in the previous videos and before the camera.
We need to set the same as we did here.
The selected marker equals to lat long, which is.
This is which is this variable okay.
lat long.
Then we need to consume the event.
So this launch this is the scoop.
And here return true.
The third step.
We need to create a custom info window.
Scroll up here inside the box.
If we scroll down you can see this green line green vertical line indicating the scoop of the box and
the content.
And this is the end of the box.
Okay, outside the box we need to create the custom info window selected marker dot let and here set
the position as a Lambda expression parameter.
Now let's explain this conditional display of a card.
We need to create a condition to display a card when the selected marker exists, and how to position
and style it so the safe call let selected marker is on a nullable variable, which is a lat long and
a custom marker object.
And this question mark dot let syntax means if the selected marker is not null, execute the block.
So let me write this note again.
This question mark dot.
Let checks.
If the selected marker is not null, then go and execute this block and the position here inside the
block is a reference to the non null selected marker.
Inside this we need to create the cart composable, which is a material design container with optional
elevation and rounded corners.
And inside the cart we're gonna set the modifier the elevation and other composable.
Okay.
So let me start creating our custom window which is the marker here, which is the custom info window.
The card text or three.
I need to add the let the longitude and this button.
Okay, start with card and inside this card set the modifier to modifier dot line.
You can set the align to alignment dot top center, then set the padding to 16 dpi dot width in maximum
250 dpi.
Set the elevation to eight dpi.
Okay, inside this card we can create a new column.
This column contains the text Composables and the button.
Set the modifier 16 dpi.
And inside the scope of this column, create the text custom window.
Custom info window.
You can set the title of the marker.
You can set it as selected marker.
This is the first text we can set it as a title by making a style to it.
Then another text for the latitude, another text for the longitude.
Then we need to create another composable, which is the button on click.
Set the selected marker to null.
Set the modifier to alignment end and the text here close.
Okay, this is our Kotlin containing three texts and one button.
And here we have the card.
Let me check.
We need to solve this elevation create.
Let me see the elevation and we need to specify the card elevation which is card defaults.
Card defaults.
We need to set the elevated shape or default elevation card elevation.
Set it to ADP.
Set the default elevation to ADP.
Here we need to pass the card defaults at first, Then we call the card elevation ATP.
Okay.
This is how we solve the card elevations.
Now we need to solve this modifier line.
We need to move it because it's outside any composable like Kotlin or box.
Okay.
We use dot align in columns or rows or box.
Let's run our application and see if it's working.
Create a new marker and you can notice that the selected marker is displaying the latitude and longitude
and the close button here.
Another okay.
You can notice it's changing whenever I create any new any new marker.
I quit by mistake.
Let me create a long click marker and you can notice it's working fine with the long click and the newly
created markers.
Okay, you see this is how we create the custom info window.