Tips：地図の埋め込み
・Google マップの埋め込み
・Yahoo!地図の埋め込み

Google マップの埋め込み

メモ

埋め込み例

東京駅 (小)

東京駅 (中)

東京駅 (大)

東京駅 (カスタムサイズ：250 x 250)

電車で東京タワーから東京スカイツリー (中)

東京スカイツリーの航空写真 (中)

富士山のストリートビュー (中)

Yahoo!地図の埋め込み

メモ

  • 埋め込み方法 (2021/8中 現在)
    ・JavaScript が必要
    ・WebGL の対応必要  (通常の Yahoo!地図 でも必要)
    1. Yahoo!地図 で埋め込みたい場所を表示
      ・住所・施設名・駅名 等で検索 (地図上で施設等のリンクも可)
      ・地図上の任意の場所で右クリックで [この地点を共有] 選択
    2. 左側の [共有] ボタン 表示を確認
    3. 右側のナビの [地図の拡大]・[地図の縮小] でズーム変更 (初期表示値)
    4. 右側のナビの [地図の種類を変更] で下記を選択
      • 表示方式：通常モード・軽量モード
      • 地図の種類： 通常・航空写真・路線・モノトーン・交通状況・屋内
    5. 左側の [共有] ボタンをクリックし、ダイアログ表示
    6. ダイアログの [地図の埋め込み] でサイズ選択、コードを [コピー]ボタン でコピー
    7. 上記コードを埋め込みたい位置に張り付け
  • 料金 等 (2021/8中 現在)
    • 上記の方法で埋め込んだ一般的な使用であれば、連絡不要で 無料
    • 紙媒体等の二次利用については不可 (詳細は下記リンク参照)
  • 外部リンク
  • 以下は、2021/8中 現在使用不可
  • 埋め込み方法 (2019/11末 現在)
    (JavaScript が必要)
    1. Yahoo!地図 で埋め込みたい場所を表示 (下記の指定も可)
      • ルート探索
      • 道沿い検索
      • 航空写真
      • 地下街
      • 鉄道路線
      • 写真＋注記
      • 地形図
      • モノトーン
      • 情報の追加 (雨雲レーダー・混雑レーダー・台風情報)
      • その他
    2. 右上の [URL]ボタンをクリックし、ダイアログ表示
      [地図のカスタマイズとプレビュー]ボタンでサイズ・形式の指定可 (下記参照)
      • 小：320 x 240
      • 中：480 x 360
      • 大：640 x 480
      • 自由設定：サイズを指定 (横幅自動調節の指定可)
      • 上記に加え形式の指定が可能
        • 自動検出
        • パソコン用 (スクロール地図)
        • スマートフォン用 (固定地図)
    3. ダイアログの [この地図をブログ、サイトにはりつける] のコードを埋め込みたい位置に張り付け
  • 料金 等 (2019/11末 現在)
  • 参照

埋め込み例

東京駅 (通常：480 ✕ 480ピクセル)

東京駅 (通常：640 ✕ 480ピクセル)

東京駅 (通常：4:3 選択した比率で埋め込み先の幅に合わせる)

東京スカイツリー (航空写真：4:3 選択した比率で埋め込み先の幅に合わせる)

東京駅 (路線：4:3 選択した比率で埋め込み先の幅に合わせる)

東京スカイツリー (モノトーン：4:3 選択した比率で埋め込み先の幅に合わせる)

東京タワー (交通状況：4:3 選択した比率で埋め込み先の幅に合わせる)

東京駅 (屋内：4:3 選択した比率で埋め込み先の幅に合わせる)

以下は旧サービスの為、表示はサービス次第

東京駅 (小)

東京駅 (中)

東京駅 (大)

東京駅 (自由設定：250 x 250)

東京駅 (自由設定：横幅自動調 x 250)

ルート探索：電車で東京タワーから東京スカイツリー

東京スカイツリーの道沿い検索

東京スカイツリーの航空写真

東京駅の地下街

東京駅の鉄道路線

東京駅の写真＋注記

富士山の地形図

東京スカイツリーのモノトーン

富士山の雨雲レーダー