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

こんにちは、ryohei(@ityryohei)です!

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

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でリンクの日本語キーワードが文字化けしてマップが正常に表示されない場合の対処法のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍