GoogleマップがKMLレイヤーでグレーになる不具合【解決済】 : トイレのうず／ブログ

Google Maps JavaScript API で KML レイヤーで情報を表示しているのですが、 KML レイヤーサポートの最終バージョン 3.65 にて KML レイヤーの背景がグレーになりベースの地図が見えなくなってしまったのを対処しました。

Maps JavaScript API で KML レイヤーのサポートが終了する

このサイトの地図は自作の WordPress プラグインで Google Maps に KML レイヤーをつけて地図を表示しています。

Google から Maps JavaScript API の KmlLayer クラスがまもなく非推奨になるというメールが 4 月の終わり頃に届きました。

要約すると、 Maps JavaScript API の KmlLayer は 2026 年 6 月以降サポートされなくなるので、 KML レイヤーを使用したければ API のバージョンを 3.65 で固定せよとのことでした。 3.65 も 2027 年 5 月で配信停止になるようです。

2026 年 5 月に確認したところ、まだバージョン 3.65 はリリースされていなかったので、対応を見送りました。この時点では Google マップは正常に表示されていました。

6 月になりバージョンを固定しようと KML レイヤーを使って表示している Google マップのあるページを見てみると、灰色の画像に KML で描いたオブジェクトが写し出されるだけです。

上の動画のように KML レイヤーが表示される前に一瞬地図が表示されるので、 Google Maps 自体は表示されているようです。

6 月になったから、新しいバージョンがリリースされたのかもしれないと思い、 API のバージョンを 3.65 に固定してみましたが、それでもやはり背景がグレーのままです。固定方法は v=3.65 というパラメーターをつけます。

https://maps.google.com/maps/api/js?v=3.65&key=[あなたのAPIキー]

そこで Gemini に聞いてみたのですが、まったく要領を得ないので、開発ツールで Google マップの要素を 1 つ 1 つ削除していくと、 Google が配信している KML レイヤー画像の背景が透明でないことがわかりました。そこで以下の CSS を適当なところ（テーマとか）に追加します。

img[src*="maps.google.com"],
img[src^="data:"] {
    background-color: transparent !important;
}

ボタンの背景色も灰色だったのもこれで直りました。

ただバージョン 3.65 の配信は 2027 年 5 月までとのことなので、 KML から GeoJSON に対応するようにコードを書き直す必要があります。暇を見つけて取り組みたいと思いますが、とりあえずバグ対応してその場を凌ぐことにします。