スポンサーサイト

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

Google Mapを画像に変換するVer2

以前紹介したGoogle Mapを画像に変換するをバージョンアップしました。

改良点
1. 数が増えてきた時に改ページしておく機能
動的な地図ではポイントを100超えるごとにページが増えます。
そのページに追従するようにしました。
startの値を100ごとに設定してください。デフォルトは300なので3ページ目になります。

2. ズームの反映機能
動的な地図のズーム取得して、静的な地図に反映します。

注意点
1. ソースのkeyの部分はGoogleのAPIを使うキーなので各自設定してください。

利用例
菊池乃東京食事処紹介記


<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/>
start=<input type="text" name="start" id="start" value="300"/>
<br/>
<button id="exec">実行</button>
<br/>
<textarea name="output" id="output" rows="10" cols="100"></textarea>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("#exec").click(function(){
key = 'your_key';
data = jQuery("#input").val();
page = jQuery("#start").val();
link = jQuery("a", data).attr("href");
start = link.indexOf("ll=");
end = link.indexOf("&", start);
position = link.substring(start+3, end);
start = link.indexOf("z=", start);
end = link.indexOf("&", start);
zoom = link.substring(start+2, end);
src = 'http://maps.google.com/staticmap' +
'?center=' + position +
'&markers=' + position + ',red' +
'&zoom=' + zoom +
'&size=425x350' +
'&key=' + key;
link = link + '&start=' + page;
result = '<a href="' + link + '" target="_blank"><img src="' + src + '"/></a>';
jQuery("#output").val(result);
});
});
</script>

一行入魂サイトにまとめがあります。
スポンサーサイト

COMMENTS

COMMENT FORM

TRACKBACK


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

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