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. Web Design

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

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

  2. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  4. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  5. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
  2. Web Design

    今すぐできる!HTMLメールの作り方
  3. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順
  4. 日記

    2015年の振り返りと今年の抱負
  5. 未分類

    wordpress初期化してしまいました。
PAGE TOP