[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Technical note

google mapをページに埋め込む

2012.04.19

あちこちで紹介されているので今更感たっぷりなのですが(汗)、google mapをサイトのページに埋め込む方法です。google側で簡単な方法が用意されています。ただ、埋め込み時に少々困ったこともあったので解決法も交えて紹介します。

※キャプチャ画像は執筆時(2012/04/19)時点のものです。

2014年3月にGoogle Maps Embed API が新しくなりましたが、旧マップの表示に戻す事でこの記事で紹介した方法でも埋め込むことが出来ます。

旧マップの表示に戻すには表示されたマップの右下の ? アイコンをクリックすると吹き出しが表示されます。その下の「以前のマップに戻る」をクリックするとフィードバックを促す内容に変わりますが、その下の「以前のgoogle mapに戻る」をクリックすることで旧マップの表示に変わります。(2014.05.22追記)

旧マップの表示の手順

マップの埋め込み。

まずはgoogle mapの検索で埋め込みたい場所を検索しましょう。松本城を検索してみました。

次にページ左の上部にあるリンクマーク(下図:赤い囲み左)をクリックすると、すぐ右に地図のリンクと埋め込むためのHTML(下図:赤い囲み右)が表示されるので、そのHTMLをコピー、自分のサイトの埋め込みたいページに貼付けるだけです。

地図のサイズを変更したい場合は、「埋め込み地図のカスタマイズとプレビュー」をクリックし、別ウインドウが開くのでそこで編集できます。

埋め込み地図のカスタマイズとプレビュー画面

単に埋め込むだけならこれだけで十分ですが、あれこれしたいと思うとちょっと工夫が必要でした。以下、その方法です。

問題その1:吹き出し・マーカーを消したい。

そのまま埋め込みHTMLをコピペしただけだと、マーカーと吹き出しも表示されます。特に吹き出しは必要ない場合が多いですね。

マーカーと吹き出しが表示される

マーカーと吹き出し両方を消す。

マーカーを右クリックし、「ここからのルート」を選択します。

「ここからのルート」を選択

マーカーが緑色になるので、再度マーカーを右クリック、「この地点を削除」を選択します。

「この地点を削除」を選択

マーカーの文字がない状態になります。この状態で先に説明した埋め込みをするだけです。

マーカーの文字がない状態

吹き出しのみを消す。

埋め込み用のHTMLに引数を追加します。取得したソースのiframe内の引数、「&output=embed」の後ろに「&iwloc=B」を追加します。

HTML
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/…(略)…&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/…(略)" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

このソースを埋め込めば吹き出しは表示されなくなります。以下、参考サイトです。

問題その2:マップの座標が意図した場所からずれてしまう。

担当した案件で、マップは非表示にし、ボタンをクリックで表示/非表示を切り替えるスクリプトをjQueryで組んだのですが、表示させてみると、マップの中心にしたい場所がが左上になってしまいました。

マップの座標がずれる

実際に組んだスクリプト以下の通り。

HTML
<div class="gmap">googlemap埋め込みHTML</div>
Javascript
$(function(){
 $('.gmap').hide();
 $('.togglegmap').click(function(){
  $('.gmap').slideToggle("slow");
 });
});

原因は、マップ読み込み時に要素が非表示になっているとずれるようです。なので表示する時に要素に書き込まれるようにスクリプトを修正しました。

HTML
<div class="gmap"></div>
Javascript
$(function(){
 $('.gmap').hide();
 $('.togglegmap').click(function(){
  $('.gmap').html("googlemap埋め込みHTML").slideToggle("slow");
 });
});

IEでは確認してませんが、Firefox、Google Chromeはずれ、Safariは正常に表示されました。下記のURLが参考になりました。

埋め込みHTMLのパラメーターについて詳しく知りたい場合はココが参考になります。