地図の埋め込み

Yahoo!マップでは「地図の埋め込み」機能を使うと、ブログやサイトに地図を表示することができます。

ご利用手順

  1. 表示したい場所やお店などの詳細画面を表示します。
    • 方法（1） キーワード検索で表示したい施設を検索し、施設の詳細画面を表示します。
    • 方法（2） 住所検索で表示したい場所を検索し、［このエリアの情報を見る］より、住所の詳細画面を表示します。
    • 方法（3） 地図画面上で施設名をクリックし、施設の詳細画面を表示します。
    • 方法（4） 地図画面上で右クリックメニューを開き、［この地点の情報］より、住所の詳細画面を表示します。
  2. 表示する地図の種類やズームレベルを設定します。
    • 地図の種類を変更するには、地図画面上の右上にある［地図の種類を変更］より、表示したい地図を選択します。
    • 地図のズームレベルを変更するには、地図右側の［拡大］、［縮小］ボタンをクリックします。
  3. ページ左の詳細画面で［共有］ボタンをクリックします。
  4. 「地図の埋め込み」で利用したいサイズを選択します。

    ［選択した比率で埋め込み先の幅に合わせる］を選択すると、1:1もしくは4:3の比率を保ったまま、埋め込んだブログやサイトの横幅いっぱいのサイズで表示することができます。
    ［カスタムサイズ］を選択すると、縦2400ピクセル✕横2400ピクセルの範囲で地図のサイズを自由に決められます。

  5. 表示されているHTMLソースをコピーします。
  6. ブログやサイトの編集画面を表示し、手順5.でコピーしたHTMLソースをはりつけて保存します。
    ご自身のブログやサイトに選択したサイズで地図が表示されます。

さらなるカスタマイズ

「地図の埋め込み」にて表示されたHTMLソース内のURLパラメータを変更することで、より細やかなカスタマイズをすることができます。

ご利用手順

  1. 「地図の埋め込み」ご利用手順を参考に、HTMLソースを取得します。 
    <script type="text/javascript" src="https://map.yahoo.co.jp/embedmap/V3/?lon=139.73522&lat=35.68075&zoom=17&cond=action:place;maptype:basic&width=480&height=480"></script>
  2. srcに記載されているURLのパラメータを修正します。
    以下は、表示する地図のズームレベルを17から2に変更した場合のサンプルコードです。 
    <script type="text/javascript" src="https://map.yahoo.co.jp/embedmap/V3/?lon=139.73522&lat=35.68075&zoom=2&cond=action:place;maptype:basic&width=480&height=480"></script>
  3. ブログやサイトの編集画面を表示し、手順2.で修正したHTMLソースをはりつけて保存します。
    ご自身のブログやサイトにカスタマイズされた地図が表示されます。

できること（1） 地図の種類を変更する

地図の種類を変更できます。
利用したい地図の種類に合わせて、URLパラメータのmaptypeの値を指定してください。

以下は、地図の種類をモノトーンに変更した場合のサンプルコードです。

<script type="text/javascript" src="https://map.yahoo.co.jp/embedmap/V3/?lon=139.73522&lat=35.68075&zoom=14&cond=action:place;maptype:twoTones;lon:139.73522;lat:35.68075&width=376&height=376"></script>

パラメータの詳細については、パラメータ一覧のmaptypeを参考にしてください。

できること（2） キーワード検索結果を表示する

キーワード検索結果を表示できます。
URLパラメータのactionの値をsearch、qの値に検索したいキーワードを指定してください。（キーワードは、UTF-8でエンコードされている必要があります）

また、あわせてbbox（検索範囲）などのパラメータを指定することで、地図の表示をより調整することができます。

以下は、「レストラン」でキーワード検索した結果を地図に表示した場合のサンプルコードです。

<script type="text/javascript" src="https://map.yahoo.co.jp/embedmap/V3/?lon=139.69381&lat=35.69188&zoom=13&cond=action:search;q=%E3%83%AC%E3%82%B9%E3%83%88%E3%83%A9%E3%83%B3;bbox:139.47036010487605,35.50968412806354,139.91327909512393,35.869418471936456;maptype:basic&width=376&height=376"></script>

パラメータの詳細については、キーワード検索設定時のcond内パラメータ一覧を参考にしてください。

できること（3） 地図上の表示を調整する

情報パネルやピンなど、地図上の表示を調整できます。

情報パネルの開閉状態を変更する場合は、URLパラメータのpanelの値を指定してください。

また、ピンの位置を変更できます。
URLパラメータのcenterの値を、default（地図の中心）か、shift（情報パネルで隠れる部分を除いた地図の中心）のいずれかに指定します。

以下は、情報パネルを開いた状態で、情報パネルで隠れる部分を除いた地図の中心にピンを表示した場合のサンプルコードです。

<script type="text/javascript" src="https://map.yahoo.co.jp/embedmap/V3/?lon=139.7454106&lat=35.6586309&zoom=15&cond=maptype:basic;action:place;gid:F3sftpjIhSg;panel:open;center:shift&width=376&height=376"></script>

パラメータの詳細については、パラメータ一覧のpanel、centerを参考にしてください。

パラメータ一覧

パラメータ 値 説明
lat必須 float 表示する地図の中心緯度を指定します。
lon必須 float 表示する地図の中心経度を指定します。
zoom

int

  • 2（広域）〜20（詳細）

表示する地図のズームレベルを指定します。

  • 2（広域）〜20（詳細）
width int 表示する地図の横幅を指定します。
height int 表示する地図の縦幅を指定します。
cond -

地図の表示に関する詳細を指定します。
この項目以降のmaptypeやactionといったパラメータはすべて、cond内パラメータとなります。

actionパラメータにて、キーワード検索（search）や施設検索（place）を指定した場合は、専用のcond内パラメータを付与する必要があります。
下記の表を参考にしてください。

maptype

string

  • basic（デフォルト）
  • satellite
  • trainRoutes
  • twoTones
  • traffic
  • indoor

地図の種類を指定します：

  • basicは、標準の地図を表示します。
  • satelliteは、航空写真の地図を表示します。
  • trainRoutesは、路線の地図を表示します。
  • twoTonesは、モノトーンの地図を表示します。
  • trafficは、交通状況の地図を表示します。
  • indoorは、屋内地図を表示します。
action

string

  • search
  • place
  • congestion
  • rainclouds
  • typhoon

地図の機能を指定します：

  • searchは、キーワード検索結果画面を表示します。
  • placeは、施設詳細画面を表示します。
  • congestionは、混雑レーダーを表示します。
  • raincloudsは、雨雲レーダーを表示します。
  • typhoonは、台風情報を表示します。
device

string

  • pc
  • sp
  • auto（デフォルト）

地図を表示するデバイスを指定します：

  • pcは、パソコンで地図を表示します。
  • spは、スマートフォンで地図を表示します。
  • autoは、自動で表示するデバイスを判定します。
panel

string

  • open
  • close

地図上に表示される情報パネルの開閉を指定します：

  • openは、情報パネルを開いた状態で表示します。
  • closeは、情報パネルを閉じた状態で表示します。
center

string

  • default（デフォルト）
  • shift

地図上に表示されるピンの位置を指定します：

  • defaultは、地図の中心にピンを表示します。
  • shiftは、情報パネルで隠れる部分を除いた地図の中心にピンを表示します。

キーワード検索設定時のcond内パラメータ一覧

パラメータ 値 説明
action必須

string

  • search

地図の機能を指定します：

  • searchは、キーワード検索結果画面を表示します。
q必須 string （UTF-8でエンコードされた）検索するキーワードを指定します。
bbox string 検索範囲を指定します。
矩形検索時の左下の経度緯度、右上の経度緯度を指定してください。
例）131.1, 35.1, 132.1, 36.2
page int 検索結果のページ番号を指定します。
例）検索結果の1ページ目を表示したい→1
lat非推奨 float

表示する地図の中心緯度を指定します。

このパラメータは非推奨のため、予告なく終了する場合があります。
同じ機能であるcond外のlatパラメータでの指定をご利用ください。
lon非推奨 float

表示する地図の中心経度を指定します。

このパラメータは非推奨のため、予告なく終了する場合があります。
同じ機能であるcond外のlonパラメータでの指定をご利用ください。

施設検索設定時のcond内パラメータ一覧

パラメータ 値 説明
action必須

string

  • place

地図の機能を指定します：

  • placeは、施設詳細画面を表示します。
lat必須 float

表示する地図の中心緯度を指定します。

actionパラメータにplaceを設定した場合、cond外のlatパラメータとあわせて、cond内のlatパラメータの指定が必要になります。
lon必須 float

表示する地図の中心経度を指定します。

actionパラメータにplaceを設定した場合、cond外のlonパラメータとあわせて、cond内のlonパラメータの指定が必要になります。