Working with dynamic canvas

I’ve an application that shows one map for each product throught controller. So, I’m trying to set canvas_map dinamically and I did something like that in my template called product-map.html:

<ion-view view-title="MAP">
	<ion-content>  
		<div style="width:100%;height:400px;" ng-attr-id="{{'canvas_map_'+product.id}}"></div>
		<button ng-attr-id="{{'button_'+product.id}}">Dive in map</button>
	</ion-content>
</ion-view>

Besides, I’m trying to call cordova-plugin-googlemaps like that:

.controller('ProductCtrl', function ($scope, $rootScope, $location, $stateParams, $http, $ionicModal, resultProducts) {

	$scope.product = resultProducts;

	var map;
	document.addEventListener("deviceready", function () {
		var div = document.getElementById("map_canvas_" + resultProducts.id);

		// Initialize the map view
		map = plugin.google.maps.Map.getMap(div);

		// Wait until the map is ready status.
		map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
	}, false);

	function onMapReady() {
		var button = document.getElementById("button_" + resultProducts.id);
		button.addEventListener("click", onBtnClicked, false);
	}

	function onBtnClicked() {
		map.showDialog();
	}
})

For some reason this is not working… Please, somebody can help me with a workaround?

I’m submitting a … (check one with “x”) [x] question [ ] any problem or bug report [ ] feature request

If you choose ‘problem or bug report’, please select OS: (check one with “x”) [ ] Android [ ] iOS

cordova information: (run $> cordova plugin list)

insert the output from the command here

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior:

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data):

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

[wf9a5m75]

Doubt your code first please.

.controller('PlaceCtrl', function ($scope, $rootScope, $state, resultPlace) {

	// Load place's data in scope's model
	$scope.place = resultPlace;

	// Create Map
	var map;
	document.addEventListener("deviceready", function () {
		var div = document.getElementById("map_canvas_" + resultPlace.id);
  console.log("div", div);  <-- null

		// Initialize the map view
		map = plugin.google.maps.Map.getMap(div);

		// Wait until the map is ready status.
		map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
	}, false);

[brunovinny]

The problem was in my code and I solved it. Thanks