Flickr GMap Show

Flickr GMap Showwctang大大撰寫的好程式
這支程式最主要的用意就是在Google Maps上頭
顯示出某個flickrset內具有座標定位的照片
標示在正確的對應地圖位置上
由於我覺得這個程式很棒
對我應該有很大的實質幫助
所以我就將這支javascript程式借來使用了 😛
有興趣的人也可以去wctang的blog看看

在使用這個javascript之前
每個人要先去Google Maps API取得自己網站專用的api key
然後在網頁中加入下列兩行程式碼以使用所需的javascript

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=在這邊把你取得的key放在這裡' type='text/javascript'></script>
 
<script src='flickr-gmap.js' type='text/javascript'></script>

當然這裡的flickr-gmap.js就是wctang大大的大作啦

接著去修改css檔案
新增這兩個style

#mainwrap {
height:500px; width:400px;
}
#gmap {
width:500px; height:400px;
}

最後就在想要插入地圖的地方
加上下面這些程式碼

<div id="mainwrap">
 
<div id="gmap"></div>
</div>
<script type="text/javascript">
FlickrGmapShow.createPhotoSetMap(document.getElementById("gmap"), "你想要顯示的set id");
</script>

這樣就可以在blog上使用gmap顯示拍攝照片的地點了
要注意的是
div標籤一定要放在script標籤之前
不然就無法正確顯示地圖

目前我只有少數幾張照片有加上座標
所以我就用這兩張照片來demo了 😛

歷史上的今天...

Powered by

6 thoughts on “Flickr GMap Show”

  1. Mozilla Firefox 2.0.0.7 Windows XP

    請問一下,關於flickr-gmap.js要去哪找,
    我在wctang的project中只有看到
    Mapplet、Gadget、greaseMonkey user script三種版本
    要在網頁內嵌,如你的DEMO那樣,要用哪版?

  2. Mozilla Firefox 2.0.0.3 Linux

    那是因為google的那個js檔案跟wctang大大的js檔案
    都有用到document.write指令
    而這個指令在IE瀏覽器中是會被終止的
    所以想看到地圖只能用firefox來瀏覽

發表迴響