【Googleマップ】IE11でリンクの日本語キーワードが文字化けしてマップが正常に表示されない

こんにちは、Ryohei（@ityryohei）です！

本記事では、Googleマップのリンクに日本語を入れると、IE11で確認した際にキーワードが文字化けしてしまい検索結果が正常に表示されない場合の対処法をご紹介しています。

上記の疑問にお答えできればと思います。

では、解説していきます。

日本語が文字化けするときはencodeURIで特殊記号に置き換えよう！

IE11でリンクに入れた日本語キーワードがGoogleマップで文字化けする場合は、日本語をエスケープシーケンスと呼ばれる特殊記号に置き換えることで表示されます。特殊記号とは、下記のように%や英数字に置き換えられた文字列です。

%E6%88%91%E3%80%85%E3%81%AF%E5%AE%87%E5%AE%99%E4%BA%BA%E3%81%A0

予め日本語の文字列を特殊文字に置き換えておき、置き換えた文字列をリンクに入れることで文字化けせずにキーワード検索することができるようになります。

特殊記号にエンコードするにはどうすればいいの？

基本的にエンコードするための関数はプログラミング言語側で用意されています。試しにJavaScriptとPHPでエンコードしてみたいと思います。

JavaScript

const uri = 'https://into-the-program.com?keyword=我々は宇宙人だ';

const encoded = encodeURI(uri);

console.log(encoded);

//実行結果

https://into-the-program.com?keyword=%E6%88%91%E3%80%85%E3%81%AF%E5%AE%87%E5%AE%99%E4%BA%BA%E3%81%A0

encodeURI()の詳細は下記ページをご参照ください。

PHP

<?php

$keyword = '我々は宇宙人だ';

echo urlencode($keyword);
//実行結果

%E6%88%91%E3%80%85%E3%81%AF%E5%AE%87%E5%AE%99%E4%BA%BA%E3%81%A0
?>

urlencode()の詳細は下記ページをご参照ください。

これでIE11でもリンクに入れた日本語が文字化けせずにキーワード検索ができるようになります！

最後に

IE11を動作保証対象から外す機会が増えてきたこの頃ですが、まだしばらくはサポート期間が残っているため他のブラウザに乗り換えていない企業も多いです。企業の住所やアクセス方法などでGoogleマップを採用するケースは多いため、IE11でチェックする際に文字化けした場合に参考にしていただければ幸いです！

以上、Googleマップ使用時にIE11でリンクの日本語キーワードが文字化けしてマップが正常に表示されない場合の対処法のご紹介でした！