為 Blogger 的地點標記加上 Google Maps 呈現

Blogger 增加了一個標記地點的功能，但只有標記也不知道能拿來做什麼，後來想想用JS寫了一個呈現的小程式，讓文章中設定的資訊可以直接呈現。

以下程式不支援 IE，因為我不想在我的 Blog 上用 Framework，所以 IE 就沒辦法呈現，哈！只要將以下其中一個的程式碼加在 </body> 之前就可以了。

在[文章]的最[前面]插入地圖

<script type="text/javascript">
function showGoogleMap(pos){
    var w=300,h=300,z=14;
try {
    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
    for(var i=0; i&lt;postOuter.length; i++){
        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
        if(!point){continue;}
        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];

        switch(pos){
            case &#039;loc-a&#039;:
                postLocation.innerHTML+=mapIframe;
                break;
            case &#039;loc-b&#039;:
                postLocation.innerHTML=mapIframe+postLocation.innerHTML;
                break;
            case &#039;post-a&#039;:
                postBody.innerHTML+=mapIframe;
                break;
            case &#039;post-b&#039;:
            default:
                postBody.innerHTML=mapIframe+postBody.innerHTML;
                break;
        }
    }
}catch(e){}
}
showGoogleMap(&#039;post-b&#039;);
</script>

在[文章]的最[後面]插入地圖

<script type="text/javascript">
function showGoogleMap(pos){
    var w=300,h=300,z=14;
try {
    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
    for(var i=0; i&lt;postOuter.length; i++){
        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
        if(!point){continue;}
        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];

        switch(pos){
            case &#039;loc-a&#039;:
                postLocation.innerHTML+=mapIframe;
                break;
            case &#039;loc-b&#039;:
                postLocation.innerHTML=mapIframe+postLocation.innerHTML;
                break;
            case &#039;post-a&#039;:
                postBody.innerHTML+=mapIframe;
                break;
            case &#039;post-b&#039;:
            default:
                postBody.innerHTML=mapIframe+postBody.innerHTML;
                break;
        }
    }
}catch(e){}
}
showGoogleMap(&#039;post-a&#039;);
</script>

在[地點]的[前面]插入地圖

<script type="text/javascript">
function showGoogleMap(pos){
    var w=300,h=300,z=14;
try {
    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
    for(var i=0; i&lt;postOuter.length; i++){
        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
        if(!point){continue;}
        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];

        switch(pos){
            case &#039;loc-a&#039;:
                postLocation.innerHTML+=mapIframe;
                break;
            case &#039;loc-b&#039;:
                postLocation.innerHTML=mapIframe+postLocation.innerHTML;
                break;
            case &#039;post-a&#039;:
                postBody.innerHTML+=mapIframe;
                break;
            case &#039;post-b&#039;:
            default:
                postBody.innerHTML=mapIframe+postBody.innerHTML;
                break;
        }
    }
}catch(e){}
}
showGoogleMap(&#039;loc-b&#039;);
</script>

實際呈現樣式：