Posted my answer in stack overflow if anyone has issues with this
Update: I put a break in @ionic/angular/dist/directives/navigation/href-delegate.js on line 34 (HrefDelegate.prototype.onClick) and it breaks if I use a button on a normal page (exactly the same text), but not if I click my button in the google maps Marker content. Also, the element on the button in Google Maps under an element inspector looks like:
<ion-button href="/tabs/(map:place/135)" routerdirection="forward" ion-activatable="" class="button button-solid hydrated">Details</ion-button>
But a button on a normal page looks like:
<ion-button _ngcontent-c1="" href="/tabs/(home:place/135)" routerdirection="forward" ng-reflect-router-direction="forward" ng-reflect-href="/tabs/(home:place/135)" ion-activatable="" class="button button-solid hydrated">Details</ion-button>
I’m attempting to pass a routerDirection from a google maps marker. The user clicks the marker, it shows a box which contains a button which has a routerDirection. routerDirection from a normal button works for me in Beta 17 now, but I’m having an issue (I think) with the context from which the HTML is provided in the marker.
When using the marker content for a transition forward, I get no back button on the next page. I don’t have a defaultHref on the ion back button on the next page, and if I did it would show a back button, but always use the defaultHref which isn’t the intent. I want it to navigate back to my map tab, but it doesn’t seem to know where I navigated forward from.
I have a map component page and a google-map component which does most of the work. When I create a marker, I pass it content to display (there are two buttons for testing):
const content = `
<h5>${place.name}</h5>
<p>${place.description}</p>
<ion-button href="/tabs/(map:place/135)" routerDirection="forward">Details</ion-button>
<ion-button routerDirection='forward' href='/tabs/(map:place/${place.id})'>Details</ion-button>
`;
markers.push({ lat: place.lat, lng: place.lon, title: place.name, content: content });
}
if (typeof this.map !== 'undefined') {
this.map.addMarkers(markers);
}
this.map refers to the google map component I mentioned earlier.
@ViewChild(GoogleMapComponent) map?: GoogleMapComponent;
And in my addMarkers method in the google-map component it adds the content as follows:
const marker = new google.maps.Marker(options);
if (typeof location.content !== 'undefined') {
const infoWindow = new google.maps.InfoWindow({
content: location.content
});
marker.addListener('click', () => {
if (typeof this.infoWindow !== 'undefined') {
this.infoWindow.close();
}
infoWindow.open(this.map, marker);
this.infoWindow = infoWindow;
});
So, when I click on the button in the marker content (after clicking on the marker), I navigate but get no back button. Any ideas? Thank you for any help.