特定エリアの印刷とページ全体の印刷で分けたい

Question

現在HTML,javascript,CSSを使ってwebページを作成しています。
地図印刷ボタンがあり、そのボタンを押すとgooglemapの表示領域だけを印刷します。
それに関しては、media＝printを使って、印刷用CSSを呼び出すようにし、印刷時だけgooglemap表示領域を印刷できるようにしています。

そこで質問があるのですが、
地図印刷ボタンを押した時は地図表示領域だけを印刷し、
Chromeのオプションから印刷をするとページ全体を印刷できるようにするにはどうしたらいいでしょうか？

現状印刷ボタンを押したときもChromeの印刷をしたときもどちらもgooglemapの表示領域のみの印刷となってしまいます。

もし分ける方法がわかる方がいればよろしくお願い致します。

Answer 1

印刷用メディアクエリで、

body.map-print :not(.print){
  display:none;
}

のように指定し、地図印刷ボタンでイベントを拾って、

mapPrintButton.addEventListener('click'.function(){
  document.body.classList.add('map-print');
  window.print();
  document.body.classList.remove('map-print');
});

のようにすればいいのでは。

Comments

[k499778]

この方法で家で試したらできました。
明日実際に試してみます。ありがとうございます！