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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

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
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

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

April Fabric Community Update

Fabric Community Update - April 2024

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