google mapをページに埋め込む

マップの埋め込み。

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

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

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

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

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

そのまま埋め込み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で組んだのですが、表示させてみると、マップの中心にしたい場所がが左上になってしまいました。

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

<div class="gmap">googlemap埋め込みHTML</div>

$(function(){
 $('.gmap').hide();
 $('.togglegmap').click(function(){
  $('.gmap').slideToggle("slow");
 });
});

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

<div class="gmap"></div>

$(function(){
 $('.gmap').hide();
 $('.togglegmap').click(function(){
  $('.gmap').html("googlemap埋め込みHTML").slideToggle("slow");
 });
});

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

• 埋め込みGoogle マップの座標がズレる場合のメモ。 | ゆず日記

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

• Google Map Parameters