Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AGM Map printing shows gap in printout

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

image showing printing being broken

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!
like image 808
Jared Avatar asked Oct 02 '18 23:10

Jared


1 Answers

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. enter image description here

like image 137
T. Shashwat Avatar answered Oct 18 '22 21:10

T. Shashwat