<p class="thumb"><img src="http://cdn.zako.org/images/2014/08/embed-gmap.jpg" alt="Embed Google Maps" width="592" height="374" class="alignnone size-full wp-image-28806" /></p>
<p>Googleマップを使って、特定の場所の地図やストリートビューをブログやサイトへ埋め込みたい時があると思います。</p>
<p>しかし地図ならともかく、ストリートビューを埋め込むことが、新しいグーグルマップでは埋め込むことができなかったり、どこからタグを発行するのかわかりづらくて面倒になっている気がします。</p>
<p>今回は、そのGoogleマップの埋め込み作業に特化していて、手順が楽になるサービスをご紹介します。</p>
<!--more-->
<h3 class="header-label">Googleマップの地図やストリートビューを埋め込むことに特化した「Embed Google Maps」</h3>
<p>「<a target="_blank" href="http://ctrlq.org/maps/embed/">Embed Google Maps</a>」は、その名の通り<strong>Googleマップの埋め込みタグを発行することに特化</strong>したサービス。</p>
<p>住所や名称で検索して、場所をタップするだけで、地図やストリートビューの埋め込みタグを発行することができます。</p>

<h4>埋め込んだ地図のサンプル</h4>
<iframe width="592" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://my.ctrlq.org/maps/#roadmap|17|35.690921|139.70025799999996"></iframe>
<p>こちらは地図を埋め込んだもの。Googleマップで埋め込みタグを発行する時となんら変わらないものが実現できます。</p>

<h4>埋め込んだストリートビューのサンプル</h4>
<iframe width="592" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://my.ctrlq.org/maps/#street|0.3399999999999999|-181.58237463451013|14.984249832501735|35.689245|139.70098099999996"></iframe>
<p>最近埋め込めなくなったのか、やり方がわかりづらくなったストリートビューも、容易に埋め込むことが可能です。</p>

<h4>発行されたタグ</h4>
<code>&lt;iframe width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://my.ctrlq.org/maps/#<b>street</b>|17|35.690921|139.70025799999996"&gt;&lt;/iframe&gt;</code>
<p>赤文字の部分を street とするとストリートビューに、 roadmap にすると地図になる様子です。</p>

<h4>埋め込みタグ発行の手順</h4>
<p>埋め込みタグを発行するには、まず場所を検索します。</p>
<p>場所を検索すると候補が出てくるので、その候補をクリックします。<br /><img src="http://cdn.zako.org/images/2014/08/embed-gmap1.jpg" alt="embed-gmap1" width="592" height="374" class="alignnone size-full wp-image-28809" /></p>
<p>海外サービスのせいか、スカイツリーなど的確に出てこない名所があるので、その場合は近いものをクリックして検索します。</p>

<p>検索をかけると、画面左下に埋め込みタグが発行されます。<br /><img src="http://cdn.zako.org/images/2014/08/embed-gmap2.jpg" alt="embed-gmap2" width="592" height="374" class="alignnone size-full wp-image-28808" />
</p>
<p>このタグを使えば地図を埋め込むことができます。デフォルトは幅600pxに固定されているので必要ならこの値を変更します。</p>
<p>また、目的の位置からずれている場合は、目的の場所をダブルクリックすればその位置が中心になります。</p>

<p>さらにペグマンを使ってストリートビューを表示させると、埋め込みタグもストリートビュー用になります。<br /><img src="http://cdn.zako.org/images/2014/08/embed-gmap3.jpg" alt="embed-gmap3" width="592" height="374" class="alignnone size-full wp-image-28807" />
</p>
<p>ただし、一度ストリートビューにしてから地図に戻しても、埋め込みタグはストリートビューのままになってしまうようです。なぜだろう。このバグ？が発声してしまった場合は、さきほどご紹介したとおり、タグの一部分を変更することで対処することが可能です。</p>

<p>興味があるかたは<a target="_blank" href="http://ctrlq.org/maps/embed/">Embed Google Maps</a>へどうぞ。</p>