トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
よくWebページを見ていると地図を張り付けているのがあります。いくつか地図をWebページに乗せる方法はあるようですが、その中でGoogle Mapがよく使われています。

そこで、今日はブログにGoogle Mapを張り付ける方法です。結構面倒ですが一度設定すれば何度でも地図が張り付けられます。
Googleサービス(ブログランキング)
Google Map使用法(設定編)


1.「https://www.google.com/accounts/」からGoogleアカウントを取得する

2.「http://code.google.com/intl/ja/apis/maps/」にアクセスする。

3.「登録して Google Maps API キーを取得します。」を選択

4.利用規約を読み「利用規約をよんだうえでこれに同意します」のチェックボックスにチェックと使用するWebサイトのURLにチェックを入れ「APIキーを生成」ボタンを押す。
ここで使用するWebサイトのURLはトップページのURLを入れるとそのトップページ階層より下のURLは全部同じ設定が適用されます。

例)「http://trivialife.blog119.fc2.com/blog-entry-1.html」に適用したい場合は、
http://trivialife.blog119.fc2.com/までで良い。



5.Google Map API keyをメモしましょう。といっても長いのでそのままお使いのWebブラウザから「ファイル」→「名前を付けてページを保存」のようにページ丸ごと保存しておくのがお勧めです。



6.お使いのブログメニューではテンプレートの編集が出来ると思いますが、テンプレートの~</tile>の前の行に<br /><script type="text/javascript" src="http://maps.google.co.jp/maps?hl=ja&file=api&v=2&key=ABQIAAAA4fyyXdgghZMEIW_7kJc2uBSvOdCH65TY_kN9evGCy9Y32txTKhQ0ln2t05Qr_WtXtxu8-t3jhWmNFQ"></script><br />を貼り付けます。この時key=の後に先ほどメモったAPI Keyを入れて下さい。<br /><br />ここまでで準備が整いました。長いけれど一度設定してしまえば、ここまでの手順はこれからは不要です。<br /><br />例)FC2ブログの場合(一部抜粋)は、↓のようになります。<br /><br /><link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml"><br /><script type="text/javascript" src="http://maps.google.co.jp/maps?hl=ja&file=api&v=2&key=ABQIAAAA4fyyXdgghZMEIW_7kJc2uBSvOdCH65TY_kN9evGCy9Y32txTKhQ0ln2t05Qr_WtXtxu8-t3jhWmNFQ"></script><br /><title><%blog_name> <%sub_title></title><br /></head><br /><br />今日は、設定編だけですが以上です。<br /><div class="fc2_footer" style="text-align:left;vertical-align:middle;height:auto;"> <div class="fc2button-clap" data-clap-url="//blogvote.fc2.com/pickup/trivialife/5/clap" id="fc2button-clap-5" style="vertical-align:top;border:none;display:inline;margin-right:2px;"> <script type="text/javascript"> (function(d) { var img = new Image(); d.getElementById("fc2button-clap-5").appendChild(img); img.src = '//static.fc2.com/image/clap/number/red/0.gif'; (function(s) { s.cursor = 'pointer'; s.border = 0; s.verticalAlign = 'top'; s.margin = '0'; s.padding = '0'; })(img.style); var clap = function() { window.open('//blogvote.fc2.com/pickup/trivialife/5/clap')}; if (img.addEventListener) { img.addEventListener('click', clap, false); } else if (img.attachEvent) { img.attachEvent('onclick', clap); } })(document); </script> </div> </div> </div> <div class="entry-footer clearfix"> <ul> <li class="date"><a href="http://trivialife.blog119.fc2.com/blog-entry-5.html" title="">2009/11/02(月) 09:30:52</a></li> <li class="trackback"><a href="http://trivialife.blog119.fc2.com/blog-entry-5.html#trackback">トラックバック(0)</a></li> <li class="comment"><a href="http://trivialife.blog119.fc2.com/blog-entry-5.html#comment">コメント(0)</a></li> </ul> <ul> <li class="tag"><a href="http://trivialife.blog119.fc2.com/?tag=Google">Google</a></li> <li class="tag"><a href="http://trivialife.blog119.fc2.com/?tag=FC2%E3%83%96%E3%83%AD%E3%82%B0">FC2ブログ</a></li> </ul> </div> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://trivialife.blog119.fc2.com/blog-entry-5.html" trackback:ping="http://trivialife.blog119.fc2.com/tb.php/5-76da2684" dc:title="Google Mapをブログに張り付ける方法(設定編)" dc:identifier="http://trivialife.blog119.fc2.com/blog-entry-5.html" dc:subject="ブログカスタマイズ" dc:description="よくWebページを見ていると地図を張り付けているのがあります。いくつか地図をWebページに乗せる方法はあるようですが、その中でGoogle Mapがよく使われています。そこで、今日はブログにGoogle Mapを張り付ける方法です。結構面倒ですが一度設定すれば何度でも地図が張り付けられます。⇒Googleサービス(ブログランキング)..." dc:creator="天狼" dc:date="2009-11-02T09:30:52+09:00" /> </rdf:RDF> --> </div> <div class="circle-footer"></div> <div id="comment"> <div class="page-navi"> <ul> <li class="page-prev"><a href="http://trivialife.blog119.fc2.com/blog-entry-18.html">前の記事</a></li> <li class="page-home"><a href="http://trivialife.blog119.fc2.com/">ホーム</a></li> <li class="page-next"><a href="http://trivialife.blog119.fc2.com/blog-entry-4.html">次の記事</a></li> </ul> </div> <h3>コメント</h3> <!-- Google Adsense : https://www.google.com/adsense --> <div class="google-ad5"> <script type="text/javascript" charset="euc-jp"><!-- google_ad_client = "pub-9530484401301654"; /* 468x60, 作成済み 09/12/16 */ google_ad_slot = "6770879146"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" charset="euc-jp"> </script charset="euc-jp"> </div> <!-- /Google Adsense --> <div class="comment-footer"></div> <div id="comment-form"> <h3>コメントの投稿</h3> <div class="comment-area"> <form method="post" action="http://trivialife.blog119.fc2.com/blog-entry-5.html" name="comment_form"> <input type="hidden" name="mode" value="regist" /> <input type="hidden" name="comment[no]" value="5"> <label for="name">名前</label> <input id="name" type="text" name="comment[name]" size="35" value="""" /> <label for="subject">タイトル</label> <input id="subject" type="text" name="comment[title]" size="35" /> <label for="url">メールアドレス</label> <input id="url" type="text" name="comment[url]" size="75" value="" /> <label for="comment">本文</label> <script type="text/javascript" src="https://static.fc2.com/js/blog/view/comment/comment_toolbar_ja.min.js?2017040501"></script> <textarea id="comment_text" cols="55" rows="9" name="comment[body]"></textarea> <label for="pass">パスワード</label> <input id="pass" type="password" name="comment[pass]" size="20" />   <input id="himitu" type="checkbox" name="comment[himitu]" /><span class="secret"> 管理者にだけ表示を許可する</span> <input type="submit" value="送信" class="button" /> </form> </div> </div><!--- close comment-form --> </div><!--- close comment --> <div id="trackback"> <h4 name="trackback">トラックバックURL</h4> <div class="trackbackbody"> <input name="trabaurl" type="text" value="http://trivialife.blog119.fc2.com/tb.php/5-76da2684" size="75" class="traba-form" /> <a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);">この記事にトラックバックする(FC2ブログユーザー)</a> </div> <div class="trackback-footer"></div> </div> <div class="page-navi"> <ul> <li class="page-home"><a href="http://trivialife.blog119.fc2.com/">ホーム</a></li> </ul> </div> </div><!--- close center-wrapper --> </div><!--- close center --> <div id="right"> <div style="text-align:left"> </div> <div class="plugin-freearea" style="text-align:left"> <h3 class="ranking clearimg"><a href="http://blog.with2.net/link.php?922088" target="_blank"><img src="http://blog.with2.net/img/v2/logo.gif" width="159px" height="46px" title="『ネットサービス』ブログランキング一覧が表示されます"/></a></h3> <div class="rankingbody"> トリビア・ライフはブログランキングに参加しています。皆様の応援クリックに支えられています。 <a href="http://blog.with2.net/link.php?922088" target="_blank" id="Ranking02"><img src="http://image.with2.net/img/banner/banner_22.gif" width="88" height="31" border="0" title="人気ブログランキング一覧が表示されます" /></a> <a href="http://blogranking.fc2.com/in.php?id=460442" target="_blank" id="Ranking01"><img src="http://blogranking.fc2.com/ranking_banner/c_03.gif" title="FC2ブログランキング一覧が表示されます" /></a> <a href="http://game-blog-ranking.com/ranking_30_1_%E3%83%AA%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A5%E6%94%BB%E7%95%A5.html" target="_blank"><img src="http://art8.photozou.jp/pub/363/228363/photo/18601144.v1236394764.gif" alt="リネージュ・攻略ブログ" border="0"></a> <a href="http://game-blog-ranking.com/ranking_148_1_ROHAN.html" target="_blank" id="Ranking04"><img src="http://farm4.static.flickr.com/3371/3571676023_399e460b48.jpg?v=0" title="ROHANブログランキング一覧が表示されます" /></a> <a href="http://internet.blogmura.com/netservice/" target="_blank"><img src="http://internet.blogmura.com/netservice/img/netservice88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ネットブログ ネットサービスへ" /></a> <a href="http://blogram.jp/users/agent/vote/?uid=71848#ref=vote" target="_blank"><img src="http://widget.blogram.jp/images/bgButton1_bla.gif" alt="blogram投票ボタン" width="88" height="31" style="border: none;" /></a> <a href=http://lineagelink.info/rank-in.php?uid=3434 target="_blank"><img src="http://data.lineagelink.info/img/rank02.gif" alt="LLランキング" border="0" /></a> </div> <div class="rankingfooter"></div> </div> <div style="text-align:left"> </div> <div style="text-align:left"> </div> <div class="plugin-freearea" style="text-align:left"> <h3 class="topic">生活のお得情報TOPIC</h3> <div class="topicbody"> <div class="topicsubtitle">外出先で使えるガジェット</div> <ul> <li title="外出先必須のモバイル"> <a href="http://px.a8.net/svt/ejp?a8mat=1ZZBTI+BCFFB6+50+3HE3PT" target="_blank"> <img border="0" width="224" height="33" alt="" src="http://www26.a8.net/svt/bgt?aid=120901014686&wid=003&eno=01&mid=s00000000018021061000&mc=1"></a> <img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=1ZZBTI+BCFFB6+50+3HE3PT" alt=""> </li> <li title="どこでも使えるリモートデスクトップ"> <a href="http://px.a8.net/svt/ejp?a8mat=1ZZBTI+AP7IPU+50+3N9NGH" target="_blank"> <img border="0" width="234" height="60" alt="" src="http://www28.a8.net/svt/bgt?aid=120901014647&wid=003&eno=01&mid=s00000000018022048000&mc=1"></a> <img border="0" width="1" height="1" src="http://www18.a8.net/0.gif?a8mat=1ZZBTI+AP7IPU+50+3N9NGH" alt=""> </li> </ul> <div class="topicsubtitle">果物ではじめる健康生活</div> <ul> <li title="パイナップル豆乳ローションで毎日カンタン素肌ケア"> <a href="http://px.a8.net/svt/ejp?a8mat=1ZZBTL+68GHDU+19WS+15QHI9" target="_blank"> <img border="0" width="224" height="33" alt="" src="http://www29.a8.net/svt/bgt?aid=120901017377&wid=003&eno=01&mid=s00000005950007010000&mc=1"></a> <img border="0" width="1" height="1" src="http://www16.a8.net/0.gif?a8mat=1ZZBTL+68GHDU+19WS+15QHI9" alt=""> </li> <li title="爽やかな柑橘系の香り&豊かな泡立ち!薬用シャンプー「しっとり美柑」"> <a href="http://px.a8.net/svt/ejp?a8mat=1ZZBTL+86PMRM+2N6Y+5YRHD" target="_blank"> <img border="0" width="234" height="30" alt="" src="http://www25.a8.net/svt/bgt?aid=120901017495&wid=003&eno=01&mid=s00000012337001002000&mc=1"></a> <img border="0" width="1" height="1" src="http://www11.a8.net/0.gif?a8mat=1ZZBTL+86PMRM+2N6Y+5YRHD" alt=""> </li> <li title="果物に含まれるビタミン、食物繊維を取りながらなのできれいに痩せられる"> <a href="http://px.a8.net/svt/ejp?a8mat=1ZZBTL+AHGVUQ+2LTI+614CX" target="_blank"> <img border="0" width="224" height="33" alt="" src="http://www29.a8.net/svt/bgt?aid=120901017634&wid=003&eno=01&mid=s00000012159001013000&mc=1"></a> <img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=1ZZBTL+AHGVUQ+2LTI+614CX" alt=""> </li> </ul> </div><div class="topicfooter"></div> </div> <div style="text-align:left"> </div> </div><!--- close right --> </div><!--- close container --> <div id="footer"> Copyright © トリビア・ライフ - 天狼記 All Rights Reserved.<br /> Template by : <a href = "http://trivialife.blog119.fc2.com/" target="_blank">トリビア★ライフ</a><br /> <span id="ad1"><script type="text/javascript">var j = 20;</script><script type="text/javascript" charset="utf-8" src="https://admin.blog.fc2.com/i/image/janre.js"></script></span><noscript><p>FC2Ad</p></noscript><script type="text/javascript" charset="utf-8" language="JavaScript" src="//static.fc2.com/comment.js"></script> <script type="text/javascript" src="//static.fc2.com/js/blog/blog_res.js"></script></div><!--- close footer --> </div><!--- close all --> </div><!--- close wrapper --> <!-- passive:ad:171 --> <div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"><div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"><iframe src='//assys01.fc2.com/1347' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --><div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div></div><span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"><img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /></span></div> <script type="text/javascript">(function(w, d) {var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style;var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; };var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; };var overlayPosition = function() {if (getScrollMax() > getScrollCurrent()) {areaStyle.bottom = 0;areaStyle.top = 'auto';} else {areaStyle.bottom = 'auto';areaStyle.top = 0;}};var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; };if (w.addEventListener) {w.addEventListener('resize', overlayPosition, false);w.addEventListener('scroll', overlayPosition, false);closeBtn.addEventListener('click', close, false);} else {w.attachEvent('onresize', overlayPosition);w.attachEvent('onscroll', overlayPosition);closeBtn.attachEvent('onclick', close);}})(window, document);</script> </body> </html>