Web Design

意外と知らなかった…google map をホームページに貼付ける方法


みなさま、こんにちは。mayukouです。

今回は、仕事で必要になったホームページにgoogle mapを貼付ける方法をご紹介します。

例えばこんな地図をページに貼りつけたい場合。

サンプル

目的の場所にポイントを置くには、ちょっとしたコツがありました。

スポンサードリンク

1.まず、<head>内に以下のタグを入れます。

 

2.<body>内の、地図を表示したい場所にタグを挿入します。

※map_canvas_01が地図のid名です。

3.geocodingサイトで、表示したい場所の座標を検索します。

ここから緯度・経度を調べます。
http://www.geocoding.jp

 

4.<head>内に以下のコードを入れます。

座標や、吹き出し部分の設定はここで行っています。

※ 一つは地図の中心座標、もう一つがポイントの座標です。
※zoomが縮尺を表してます。数字を変えて適切なズームに変えてください。
サンプル

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  2. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!

    皆さんこんにちは、mayukouです。先日、スライダーに便利で簡単な…

  3. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  5. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  6. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える
  2. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!
  3. illustration

    対面打ち合わせ一切なし!イラスト制作の仕事の流れ
  4. Mac

    アプリケーションをすぐに起動できる!Alfredの使い方
  5. ブログ

    明けましておめでとうございます。今年の抱負
PAGE TOP