WEBVTT

00:00.120 --> 00:07.440
When working with markers in Google Maps, handling click events is essential for creating interactive

00:07.440 --> 00:08.040
maps.

00:08.160 --> 00:13.760
In this video, we're going to learn how to implement and manage marker click events.

00:13.920 --> 00:18.520
Let's start with the simple click event on every marker.

00:18.560 --> 00:19.960
You can click it.

00:19.960 --> 00:29.080
So for example, if I click on it, the camera will zoom and make it at center and display this info

00:29.120 --> 00:29.840
window.

00:29.880 --> 00:35.440
This info window contains a title and a snippet, and we talked about it in the previous video.

00:35.760 --> 00:39.920
Okay, now let's handle the custom click events.

00:40.000 --> 00:46.480
If we go to the marker, we notice that we have onClick parameter.

00:46.520 --> 00:55.440
This onclick takes a marker as a parameter and returns a boolean when in the in the expression.

00:55.640 --> 00:59.560
Okay, so let me start on click.

00:59.600 --> 01:02.500
We need to pass a lambda expression.

01:02.500 --> 01:07.140
And here let me set a marker as a parameter.

01:07.300 --> 01:12.900
You can for example show info window and log.

01:13.180 --> 01:22.860
For example the that look at the key is tag and the message is you clicked Singapore marker.

01:23.020 --> 01:28.700
Then we need to return a boolean which is true to consume the event.

01:28.740 --> 01:30.820
Okay let me check.

01:30.980 --> 01:31.980
Run again.

01:32.020 --> 01:38.940
Open the look at search for tag and here click on the marker.

01:39.060 --> 01:42.580
You notice you clicked Singapore marker.

01:42.620 --> 01:47.060
Okay again if you click, the messages will appear.

01:47.100 --> 01:52.140
Okay this is how we handle the click event on the marker.

01:52.300 --> 02:00.540
The onClick event Lambda expression receives the marker object that was clicked.

02:00.740 --> 02:08.800
Return it true to consume the event, prevent default info window behavior, and return false if you

02:08.800 --> 02:11.840
want to show the default window or info window.

02:11.840 --> 02:16.920
So here false if you notice if I click on the marker, we are.

02:16.960 --> 02:21.040
We are not displaying the info window.

02:21.040 --> 02:28.840
So again if I click you can notice that the click event is um is triggered and using.

02:28.840 --> 02:31.360
True we are not displaying the info window.

02:31.360 --> 02:34.560
If I use false like this.

02:34.560 --> 02:36.200
Run the application again.

02:36.240 --> 02:37.560
Click the marker.

02:37.840 --> 02:43.080
We are displaying the message and displaying the info window.

02:43.080 --> 02:50.000
So this is the difference between using the true and false boolean and returning it.

02:50.000 --> 02:55.000
Okay, so true to consume the event and prevent default info window behavior.

02:55.200 --> 02:55.760
False.

02:55.760 --> 02:58.520
If you want to show the default info window.