スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google Mapを画像に変換する

Google Mapをブログなどに貼付けると、色々とJavaScriptが組み込まれているため表示に時間がかかります。
そこで、Google Static Maps APIを使って画像を表示することで、時間がかからなくすることができます。

手順
1. Googleマップのマイマップにアイコンを追加
2. 右上のリンクをクリックして「HTML を貼り付けてサイトに地図を埋め込みます」のHTMLをコピー
3. 以下のツールを利用して、HTMLを変換
4. 変換したHTMLをブログなどにコピー

ツール

<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Google Map地図変換</title>
</head>
<body>
<textarea name="input" id="input" rows="10" cols="100"></textarea>
<br/>
<button id="exec">実行</button>
<br/>
<textarea name="output" id="output" rows="10" cols="100"></textarea>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("#exec").click(function(){
key = 'your_key';
data = jQuery("#input").val();
link = jQuery("a", data).attr("href");
start = link.indexOf("ll=");
end = link.indexOf("&", start);
position = link.substring(start+3, end);
src = 'http://maps.google.com/staticmap' +
'?center=' + position +
'&markers=' + position + ',red' +
'&zoom=18' +
'&size=425x350' +
'&key=' + key;
result = '<a href="' + link + '" target="_blank"><img src="' + src + '"/></a>';
jQuery("#output").val(result);
});
});
</script>
スポンサーサイト

COMMENTS

COMMENT FORM

TRACKBACK


この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。