FlickrでGoogleMapへのリンクを表示するGreasemonkeyを書いてみた
私は旅行に行くと写真を沢山撮ります。そして撮った写真にはGPS情報を付加してFlickrにアップロードしています。
Flickrから撮影場所の地図を見ることができるのですが、最近ゼンリンの地図からOpenStreetMapになったみたいで細かい情報が表示されずイマイチな感じ。なので、Greasemonkeyで便利にしてみました。
// ==UserScript== // @name Replace Google map // @namespace http://d.hatena.ne.jp/tech-kazuhisa/ // @include http://www.flickr.com/photos/* // ==/UserScript== (function (d, func) { var h = d.getElementsByTagName('head')[0]; var s1 = d.createElement("script"); s1.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"); s1.addEventListener('load', function () { var s2 = d.createElement("script"); s2.textContent = "jQuery.noConflict();(" + func.toString() + ")(jQuery);"; h.appendChild(s2); }, false); h.appendChild(s1); })(document, function ($) { // ここにメインの処理を書く $(document).ready(function ($) { var uri = $('#photo-story-map-zoom-street'); clat = uri.attr('src').match(/clat=[0-9]*\.[0-9]*/).toString().replace(/^clat=/, ''); clon = uri.attr('src').match(/clon=[0-9]*\.[0-9]*/).toString().replace(/^clon=/, ''); var google_map_link = $("<a/>").attr({ "href": "https://maps.google.co.jp/maps?q=" + clat + "," + clon + "(" + $("#title_div").text() + ")&hl=ja", "target": "_blank" }); google_map_link.html("[View GoogleMap]"); $('#photo-story-story').append("<p>"); $('#photo-story-story').append(google_map_link); }); });
jQueryが使いたかったのでGreasemonkey で 超お手軽に jQuery を使うスニペットを参考にして雛形を持ってきて、GoogleMapへのリンクを作成する処理を書いてみました。
地味ですがこんな感じでGoogleMapへのリンクが表示されます。
もう少し作りこんで標準の地図をそのまんまリプレースするところまでもっていきたいですね!
http://userscripts.org/scripts/show/140401