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)


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


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


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


東京駅の地下街


東京駅の鉄道路線


東京駅の写真+注記


富士山の地形図


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


富士山の雨雲レーダー