AGM Map printing shows gap in printout

Question

Printing my Angular AGM Map from chrome I get this large grey gap in the map:

As you can see, not only is the grey bar there (it turns white if I turn off "background graphics"), but it also shifts the map image below it down

Below is the simple code required to reproduce this issue:

app.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <button (click)="clickPrint()">print</button>
        <agm-map id="Gmap" [latitude]="34.051759" [longitude]="-118.244576" [zoom]="17"></agm-map>
        `,
    styles: [`
        agm-map {
            height: 800px; //height: 100%;
        }
        button {
            position: absolute;
            z-index: 10;
        }
    `]
})
export class AppComponent {
    clickPrint() {
        print()
    }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core'

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AgmCoreModule.forRoot(/*{
            apiKey: 'YOUR_API_KEY'
    }*/),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

styles.css:

html, body {
    margin: 0px;
    height: 100%;
    overflow: hidden;
}

Note: make sure you hit the Print button to see the issue

I have included a link to StackBlitz in case you want to tinker with my broken code: StackBlitz Link

Other information surrounding my problem:

• I'm not doing anything fancy with this demo, it is simply an Angular AGM Map, which I'm trying to print.
• If I change the zoom, or pan around, the size of the gap in the map when printing will fluctuate, but I'm hoping that some sort of css trick will help me to eliminate it completely. Thank you so much for your help!

Enamel

I am not very familiar with AGM, but I'd suggest you try to set your map height in px instead of percentage. Seems to work with the StackBlitz you provided. Or, you should find a way to trigger a map resize when printing. – Homeless

@Homeless I'm sorry, however that does not fix it for me, I did say that if you change your zoom etc, it will change the size of the gap, but it never goes away. I even tested for this glitch on the official stackblitz linked from the github: stackblitz.com/edit/angular-google-maps-demo and if you open the console on the right, and type in print(), you'll see the exact same problem, and their demo actually is hard coded to 300px. – Enamel

@Homeless I have updated my code to use px for the height rather than percent, and it also shows the gap. It's possible that you got it working once, because I have been able to get it to go away randomly for a single zoom-scale, however nothing works everywhere like I need. – Enamel

@Homeless thank you for your help though, that was a good idea, and I'm open to any ideas at this point! – Enamel

Yeah sorry but I don't think I'll be of much more help on this. Printing is always tricky. Even if you find a height that works for you, it might not work for someone else, depending on the printer/paper settings, margins, etc. Might be worth having a look at this answer though. – Homeless

It has to be browser/OS related, because I don't see any gap in the example you've provided. On which browsers have you seen this issue? – Gilding

@MateuszWitkowski it's the 7th word in the question. – Comedown

@MateuszWitkowski the browser it needs to run on is chrome (which is a requirement, because I'm using puppeteer, which in turn uses chrome) – Enamel

If you're only interested in Chrome, your best bet is Puppeteer. If you want a cross-browser solution, you're probably looking for print.js or similar. You need one which works with promises (pdfshift, for example, won't work as it only waits 10 seconds for page to load). Before you ask: no, there's no shortcut: the map relies on JS to render. That JS is not run in print mode. I did try to play around with visibility and get it to print: let's just say I'd be raising my right eyebrow if anyone could. – Comedown

@AndreiGheorghiu yeah I'm using puppeteer, I just wasn't including that because I thought it was over-complicating the issue that the map prints with a gap in general (from chrome). However, yes, I'm technically using puppeteer to generate a PDF of the map, which is why I need this to work. – Enamel

@AndreiGheorghiu were you able to get it to print without a gap using visibility? If so I'm quite interested! – Enamel

Nope. It should, but it doesn't. I've played around with it and I don't fully get what's applying to it in actual print mode. While testing it with print styles in emulation mode, it looks good. I'm guessing this might have to do with some transforms applied. As per puppeteer printing, you need to use page.evaluate() and pass whatever you want to print to it, afaik. – Comedown

Answer 1

Add display and width property to

    agm-map {
        height: 800px;
        width:800px;
        display:inline-flex;
    }

check this stackblitz

hope that's what you were looking for.

Kistner

@t-shashwat I'm sorry, but I tried inline-flex out (both in your stackblitz demo, modifying my own demo, and my app), and while it does fix that particular 800x800 printout, sadly it does not fix it for all zoom levels like I need. When I tried implementing it in my app, it still had the gap in it. However, I'm not giving up just yet, I'm going to investigate it both the stackblitz demo further tomorrow and verify that it is truly still broken. And if I find that I'm unable to break it by zooming or panning, then I'll be sure and mark your answer and give you credit. – Enamel

@t-shashwat I have a feeling like maybe the only way I'm truly getting around this problem for all scenarios would be to either write a function that flips through the map tiles and checks them or, if I want to go overboard, I can get in to the actual source code and see if I can find what is causing this bug. I've already found a way to select and offset a specific row of divs using css, but I need it to be reliable, and I don't see that happening just yet, still much more to do on my end. Either way I'll report back here my findings. I appreciate you trying, thank you very much! – Enamel

@Enamel hi, I tried for 1000x1000, 500x500 and zoom as 10,20,30 for these cases also print is working as expected. It would be great if you tell the numbers which can reproduce the issue. Often CSS fixes are not permanent so please let me know if you get some coding way to fix it. Thanks :) – Kistner

Answer 2

If someone is still looking for the answer on 2020, this workaround works for me. Add this css on your @media print section.

Seen here: https://bugs.chromium.org/p/chromium/issues/detail?id=426294

#map_canvas div > img {
  position: absolute;
}

.gm-style div > img {
  position: absolute;
}

Schmit