google mapでうまく表示されない。見れるようにしたいです。

前回、
Google Mapでの住所表示、周辺スポット表示を、同一サイトでページ毎に行いたい
http://q.hatena.ne.jp/1470778105
で質問しまして、サイトにgoogle mapの地図を搭載することができたのですが。

何という名称なのでしょうか、例えば、
%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC%A3
という文字列があります。これは、
http://n7.com/japanese/
のサイトでデコードすると「兵庫県神戸市兵庫区塚本通4丁目」という文字列を示すのですが。
そして、デコード前の長い半角英数の文字列の方で地図を表示させたいのですが、
http://iphonestation.info/map?address=%CA%BC%B8%CB%B8%A9%BF%C0%B8%CD%BB%D4%CA%BC%B8%CB%B6%E8%C4%CD%CB%DC%C4%CC%A3%B4%C3%FA%CC%DC%A3&zoom=15
と入れても、うまく表示できないのです。
日本語だとうまく表示されるのですが…半角英数の方でも表示できるようにする方法がありましたらお教えいただきたいです。よろしくお願いいたします。

回答の条件
  • 1人20回まで
  • 登録:
  • 終了:2017/12/02 11:59:46
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント1800pt

何という名称なのでしょうか

文字列を、URI エンコードという処理を施した結果になります。

「兵庫県神戸市兵庫区塚本通4丁目」という文字列を示すのですが

確かにそうなのですが、文字コードが EUC-JP になってます。
UTF-8 の文字コードを URI エンコードした結果を使ってください。

例えば、↓のようにです。
http://iphonestation.info/map?address=%E5%85%B5%E5%BA%AB%E7%9C%8C%E7%A5%9E%E6%88%B8%E5%B8%82%E5%85%B5%E5%BA%AB%E5%8C%BA%E5%A1%9A%E6%9C%AC%E9%80%9A%EF%BC%94%E4%B8%81%E7%9B%AE&zoom=15



追記です。

前回の質問では UTF-8 前提で問題がなかったので、実は混在しているとか、JUGEMブログからインポートした後に何か作業をして、今更インポートからやり直すのがめんどくさいとか、あるかもしれないので、プログラムでどうにかする方法も考えて見ました。

外部のライブラリを使います。
ecl.js というライブラリがあります。
↓から手に入れて、ご自分のサイトのどこかに配置してください。
http://www.vector.co.jp/soft/other/java/se342855.html

そのライブラリを script タグで読み込みます。
適当な位置で構わないのですが、head 要素の最後とかに。

<script src="...../ecl.js"></script>

コードを書き換えます。
以下のコードを、

    if (param['address']) {
        address = decodeURIComponent(param['address']);
    }

次のように書き換えてください。

    if (param['address']) {
        try {
            address = decodeURIComponent(param['address']);
        } catch (e) {
            address = UnescapeEUCJP(param['address']);
        }
    }

address パラメータが UTF-8 が URI エンコードされたものではなかったときに、EUC-JP でチャレンジするように変更しました。

コメントに書いたように、質問文に書かれた URI エンコードした文字列は、末尾に %A3 が余っているので残ります。
これは、元の文字コードが EUC-JP であることとは関係なくて、何かの作業ミスのような気がします。

他11件のコメントを見る
id:a-kuma3

ちょっと、分かりにくいか。
余計な p タグは、↓です。


<p><script>
window.addEventListener("DOMContentLoaded", function() {
// パラメータの切り出し
var param = {}
location.search.substring(1).split("&").forEach(function(s) {
var a = s.split('=');
param[a[0 = a[1];
});</p>
<p> var zoom = parseInt(param['zoom']), address = '', keyword = '';</p>
<p> if (param['address']) {
try {
address = decodeURIComponent(param['address']);
} catch (e) {
address = UnescapeEUCJP(param['address']);
}
}</p>
<p> display_map("map", zoom, address, keyword);
});
</script></p>

2017/12/02 16:41:05
id:sherlockhomeless

ありがとうございます、直りました!
ただすみません、別のサイトにも搭載しようとしたのですが…なぜかうまく地図が表示されませんでして。
詳細は http://q.hatena.ne.jp/1512213511 に記載しましたので、またa-kuma3さんお手隙の時にご教授いただけますと幸いです<m(__)m>

2017/12/02 20:20:01

その他の回答1件)

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154ここでベストアンサー

ポイント1800pt

何という名称なのでしょうか

文字列を、URI エンコードという処理を施した結果になります。

「兵庫県神戸市兵庫区塚本通4丁目」という文字列を示すのですが

確かにそうなのですが、文字コードが EUC-JP になってます。
UTF-8 の文字コードを URI エンコードした結果を使ってください。

例えば、↓のようにです。
http://iphonestation.info/map?address=%E5%85%B5%E5%BA%AB%E7%9C%8C%E7%A5%9E%E6%88%B8%E5%B8%82%E5%85%B5%E5%BA%AB%E5%8C%BA%E5%A1%9A%E6%9C%AC%E9%80%9A%EF%BC%94%E4%B8%81%E7%9B%AE&zoom=15



追記です。

前回の質問では UTF-8 前提で問題がなかったので、実は混在しているとか、JUGEMブログからインポートした後に何か作業をして、今更インポートからやり直すのがめんどくさいとか、あるかもしれないので、プログラムでどうにかする方法も考えて見ました。

外部のライブラリを使います。
ecl.js というライブラリがあります。
↓から手に入れて、ご自分のサイトのどこかに配置してください。
http://www.vector.co.jp/soft/other/java/se342855.html

そのライブラリを script タグで読み込みます。
適当な位置で構わないのですが、head 要素の最後とかに。

<script src="...../ecl.js"></script>

コードを書き換えます。
以下のコードを、

    if (param['address']) {
        address = decodeURIComponent(param['address']);
    }

次のように書き換えてください。

    if (param['address']) {
        try {
            address = decodeURIComponent(param['address']);
        } catch (e) {
            address = UnescapeEUCJP(param['address']);
        }
    }

address パラメータが UTF-8 が URI エンコードされたものではなかったときに、EUC-JP でチャレンジするように変更しました。

コメントに書いたように、質問文に書かれた URI エンコードした文字列は、末尾に %A3 が余っているので残ります。
これは、元の文字コードが EUC-JP であることとは関係なくて、何かの作業ミスのような気がします。

他11件のコメントを見る
id:a-kuma3

ちょっと、分かりにくいか。
余計な p タグは、↓です。


<p><script>
window.addEventListener("DOMContentLoaded", function() {
// パラメータの切り出し
var param = {}
location.search.substring(1).split("&").forEach(function(s) {
var a = s.split('=');
param[a[0 = a[1];
});</p>
<p> var zoom = parseInt(param['zoom']), address = '', keyword = '';</p>
<p> if (param['address']) {
try {
address = decodeURIComponent(param['address']);
} catch (e) {
address = UnescapeEUCJP(param['address']);
}
}</p>
<p> display_map("map", zoom, address, keyword);
});
</script></p>

2017/12/02 16:41:05
id:sherlockhomeless

ありがとうございます、直りました!
ただすみません、別のサイトにも搭載しようとしたのですが…なぜかうまく地図が表示されませんでして。
詳細は http://q.hatena.ne.jp/1512213511 に記載しましたので、またa-kuma3さんお手隙の時にご教授いただけますと幸いです<m(__)m>

2017/12/02 20:20:01
id:kaoato No.2

回答回数236ベストアンサー獲得回数86

ポイント50pt

1.JUGEM-XML形式で書き出し (UTF-8)
2.MovableType4形式に変換
 http://hmgx.net/jugem2mt/
3.Wordpresにインポート

この手順を踏んでみたらどうでしょう?

他1件のコメントを見る
id:kaoato

Wordpressの記事の時点で、URLエンコードをしておけば、変換されない気がするのですが、どうでしょうか?

2017/11/26 20:09:56
id:sherlockhomeless

ご回答ありがとうございます。なぜか変換されてしまいまして…。

2017/12/02 11:59:26

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません