Route from an Angular Google Maps to another component

Question

I'm building an app that has an Angular Google Maps and a button that loads in the root component in this way:

app.component.html

<div #mapContainer id="map"></div>
<a [routerLink]="['/calculation']"><button type="button" class="btn btn-outline-light btn-lg">Calculate</button></a>
<router-outlet></router-outlet>

app.component.css

#map {
    top:0; left:0;
    position:absolute;
    height: 100%;
    width: 100%;
    margin: 0; padding:0;
}

The button has a route to /calculation, which when clicked, takes the user to a new component. The Angular Google Maps takes the whole page space by using position:absolute. When I click the 'Calculate' button however, the new component loads, but behind the google maps (routing works correctly), making it invisible to the user.

The component I'm trying to route to doesn't have any css, and the html is just text. Is there a simple way to have a component load on top of the Google maps in this situation?

you are giving widht & height 100% try to decrease its height by 20% or 50%...In a new page you want to see google maps on top of the page & new Component(after clicking calculate button) below of google maps??? Could you please provide any stackblitz??? — Pallamolla Sai, Jan 12 '20 at 05:43
No, the new page shouldn't have any google maps on display, just the new page is displayed. The google maps will have a 'Calculate' button that will lead to this new page, without showing the map at all. I will try and add the stackblitz of what i have — jjcastil, Jan 12 '20 at 07:50
then you can use *ngIf on div(#mapContainter) based on route??? — Pallamolla Sai, Jan 12 '20 at 07:56
this link might help https://stackoverflow.com/questions/44429276/how-to-catch-routes-in-ngif — Pallamolla Sai, Jan 12 '20 at 08:04

Route from an Angular Google Maps to another component

0 Answers0