前提・実現したいこと
HTMLで、GoogleMapから地図を埋め込み表示させた時にデベロッパーツール上で以下のエラーメッセージが表示されます。
Map自体は、正常に表示されてはいますがエラーを解消する方法が分かりません。
(Cookieに、SameSite=「None」を付けSecure属性を設定。とありPHPを使ってないローカル環境では無視でもOKなのでしょうか?)
発生している問題・エラーメッセージ
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute クロスサイト・リクエストでクッキーを送信するかどうかをSameSite属性で指定する。(翻訳サイトより)
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title>Google Map</title> 6 <meta charset="UTF-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link rel="stylesheet" href="style.css"> 10 11</head> 12 13<body> 14 15 <div class="map-wrapper"> 16 <iframe 17 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25919.998465564215!2d139.69168761843417!3d35.70162233249288!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d2059b7fd4b%3A0xec61c68fe232efd2!2z5p2x5Lqs6YO95paw5a6_5Yy6!5e0!3m2!1sja!2sjp!4v1627889289017!5m2!1sja!2sjp" 18 width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> 19 </div> 20</body> 21 22</html>
CSS
1.map-wrapper { 2 width: 100%; 3 height: calc(100vw * 0.75); 4 margin: 0 auto; 5} 6 7iframe { 8 width: 75%; 9 height: 56.25%; 10}
試したこと
他の場所のMapを埋め込んでみても同じ症状
他のサイトで埋め込まれたMapではエラーメッセージが表示されず
補足情報(FW/ツールのバージョンなど)
visual studio code で記述
Google Chrome で表示
回答1件
あなたの回答
tips
プレビュー