Printing AgmMap shows gap which shifts down bottom of map

Issue description Printing my Angular AgmMap from chrome I get a gap in the map, which shifts down the bottom-half of the map.

Steps to reproduce and a minimal demo of the problem

1. create a simple angular app
2. implement an AgmMap in your app
3. open your app in chrome and hit print (or type print() in the console) it will show a gap in the map, which varies depending on your zoom and area

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;
		}
		button {
			position: absolute;
			z-index: 10;
		}
	`]
})
export class AppComponent {
	clickPrint() {
		print()
	}
}

Here is a link to StackBlitz if you would like to see a demo, just make sure you hit the Print button I provided on the map StackBlitz demo

What steps should we try in your demo to see the problem?

Open the app with chrome and click the print button I provided on the map. On the print preview, as well as the printout, you will see a grey gap which shifts map content downward.

Current behavior Printed app shows a gap in the AGMMap

Expected/desired behavior Printed app should show a normal AGMMap similar to how it looks on the screen, without a gap in it

angular2 & angular-google-maps version "@agm/core": "^1.0.0-beta.5", "@angular/cli": "~6.1.5",

Other information I have also tested for this bug in your link » Play with Angular Google Maps on Stackblitz and it also happens there. Below are the screenshots of how to check for it there: Step 1: open your Stackblitz link Step 2: open the stackblitz console for the app Step 3: type “print()” in the console and hit enter The result also shows the same problem, however, the bottom gets shoved off so you can’t see the shifted area, but it’s pretty obvious that it’s there, since marker B is floating in a grey void.

I also asked this question here in hopes that there is some sort of work-around. The gap will change size if you pan around, or zoom in and out, however it never disappears completely in my testing.

Thank you for your help with this, I’ve been racking my brain for the last week trying to fix this issue.

[tshashwat7]

Can be fixed using CSS. I added display: inline-flex ; and width property on agm-map. here is solution Hope it works for all cases.

[tshashwat7]

sure, plz share if you find any as I have done same thing for my piece of code.

thanks in advance

On Tue, Oct 16, 2018 at 5:57 PM Jared [e-mail] wrote:

I investigated further and was able to select just the tiles that were shifted, and shift them to where they should be for one of my maps that was broken like this, I found that if I use the following css it corrects the problem for just one map, however, it will break it for other maps. I’m going to try and find a more bulletproof way to correct this issue.

@media print { /** select map tiles in an effort to fix the broken printing / / filter: brightness(50%); // this was used to identify I was selecting the right tiles / agm-map>div>div>div>div>div>div>div>div[style=“top: 256px;”]>img[draggable=“false”][role=“presentation”]{ position: relative; top: -128px; } }

note: the row with top: 256px; was what was broken for one of my maps. and shifting it up by exactly 1/2 the tile size works at least for this one scenario (and only for printing of course)

@tshashwat7 https://github.com/tshashwat7 thank you for giving it a shot, I still haven’t ruled out your solution yet, but at first glance it doesn’t appear to fix my map, even though it does fix that one particular map size in the stackblitz demo.

I will report back if I find anything further.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SebastianM/angular-google-maps/issues/1516#issuecomment-430217634, or mute the thread https://github.com/notifications/unsubscribe-auth/ARJZoAhLjmLPZRmgHSyuXn0p6S4RACjsks5uldClgaJpZM4XFFL6 .

– Shashwat Tiwari Software Engineer(INFOSYS) Pune,India Email: [e-mail] Phone No.: [phone]