Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Blaenzo
Advocate I
Advocate I

Filter report based on Google Maps marker click event

I have Google Maps fully working in a custom visual except for the filtering of the rest of the report when I select a marker in the map.

 

My question is; how can I store the

identity: powerbi.visuals.ISelectionId

in the marker properties such that I can use 

this.selectionManager.select(marker.identity, true)

to filter the report on e.g. a click event on the map?

 

I currently have:

var markers = this.viewModel.dataPoints.map(function (dp, i) {
	return new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	})
})

Thanks for any help or suggestions!

Martijn

 

1 ACCEPTED SOLUTION
Blaenzo
Advocate I
Advocate I

I solved it the easy way by creating the click event on creation of the marker:

 

var markers = this.viewModel.dataPoints.map(function (dp, i) {

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	})

	google.maps.event.addListener(marker, 'click', (function (marker) {
		return function () {
			thisRef.selectionManager.select(dp.identity)
		}
	})(marker));

	return marker;
})
 

View solution in original post

2 REPLIES 2
Blaenzo
Advocate I
Advocate I

I solved it the easy way by creating the click event on creation of the marker:

 

var markers = this.viewModel.dataPoints.map(function (dp, i) {

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	})

	google.maps.event.addListener(marker, 'click', (function (marker) {
		return function () {
			thisRef.selectionManager.select(dp.identity)
		}
	})(marker));

	return marker;
})
 

I noticed that it is possible to add custom properties to a Marker, but that typescript forces you to use .set and .get.
Updated code:

var markers = this.viewModel.dataPoints.map(function (dp, i) {

	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(
			dp.lat,
			dp.lng
		),
		title: dp.category,
		zIndex: i
	});

	marker.set('identity',dp.identity);

	google.maps.event.addListener(marker, 'click', (function (marker) {
		return function () {
			thisRef.selectionManager.select(marker.get('identity'));
		}
	})(marker));

	return marker;
});

Helpful resources

Announcements
Sept PBI Carousel

Power BI Monthly Update - September 2024

Check out the September 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

Sept NL Carousel

Fabric Community Update - September 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors