monograph

レスポンシブ対応。ブログにGoogle Mapsで作成した地図(マイプレイス)を埋め込む方法。

3
18
8
20

      2013/12/06

th_Number333 2013-10-03 14.44.03-1.jpg
Googleマップがないともはやどこにも行けません。
PITE.(@infoNumber333)です。

もう純正のマップアプリいらないから早くGoogleマップをiOS標準のマップに戻してほしい。

今日はそのGoogleマップをWebページに埋め込む方法を解説します。
飲食店の紹介やカフェの紹介、雑貨屋、イベントなどなどブログで地図を挿入したいことは多々あると思いますのでとりあえず覚えておくと役立ちます。

Googleマップで「マイプレイス」を作成


Number333_2013-10-03_15.10.18-1.jpg
まずはGoogleマップを開いて紹介したい場所の名前を検索。
ピンをクリックするとメニューが表示されるので「保存」をクリック。

すると「マイマップに保存」という項目が下に現れるので「保存」を押せばその場所がマイマップに記録されます。

Number333_2013-10-03_15.10.31-1.jpg
登録した場所は左サイドバーにある「マイプレイス」というボタンをクリックすれば見ることができます。

Number333_2013-10-03_15.14.45-1.jpg
マイプレイスの中にある紹介したい場所を選択したら、右上の鎖マークのボタンをクリック。

Number333_2013-10-03_15.14.53-1.jpg
このようにリンクが作成されるので今回の方法では下の段のコードをコピーします。

「embedresponsively.com」を使ってレスポンシブ化


th_Number333 2013-10-03 15.20.07-1.jpg
先ほど作成したコードでは縦横の大きさが固定されてしまいPCとスマホで見た時に使い勝手が全然違ってしまいます。これを解決するために今回はコードを自動でレスポンシブ化してくれる「emberdresponsively.com」を使います。

embedresponsively.com

このWebツールはYoutubeやDailymotionなどの埋め込み系の要素をコピペするだけでレスポンシブのコードに変換してくれるという超お役立ちツール。この中の「Google Maps」を選んで先ほどのコードを入力すれば、下にレスポンシブ化されたマップコードが作成されるのであとはそれをブログの好きな所に貼り付ければおしまい。

きっと何度もお世話になると思われるサイトなのでブックマーク推奨です。


Pite(@infoNumber333)はこう思うよ。

こういうちょっとしたTipsが意外と大事なのです。
pitecomeimg.png

 - カスタマイズ

total

49

share!

シェアしてくれるとめっちゃよろこびます。

Monograph goods in bag23 teaparty

  関連記事

fixedsidebar1.jpg
超簡単にサイドバーをスクロールに合わせて画面に固定してくれるWordPressプラグイン

なんとなく久々にブロガー向けの記事を書く気が。 本日も“monogr …

WordPressメモ:続きを読む(Read more)を設定/表示する方法

現在WordPress(このブログのソフト)のデザインを試行錯誤しながら作ってる …

facebook likebox000.jpg
Facebookページヘのいいね!を促す「Facebook like box」の設置方法。

最近、多くのブロガーさんとお話する機会が多く、その中でFacebookの重要性を …

NUMBER333テーマ変更ポイント1.jpg
NUMBER333のPC用WordPressテーマを新しく作成しました。今回覚えたテクニック7つをメモを兼ねてご紹介するので参考にどうぞ!

何故深夜はこうも作業が捗るのか。 本日も“monograph&#82 …

bitnami インストール設定004.jpg
超簡単!WordPressのローカル環境をBitNamiを使って構築する方法・手順を解説します。

今日ブロガーフェスティバルに参加してブログ熱が再燃してきました!! PITE.( …

Lifehacker_201307_130709feedly_url.jpg
5分で完了。ブログにfeedlyのRSS登録用ボタンを設置する方法・手順を解説します。

起きて最初の30分はRSS眺めるのが趣味。PITE.(@infoNumber33 …

Number333 2012-05-07 3.07.12.jpg
WordPressの関連記事表示プラグイン「YARPP」をiPhone・スマホ用にカスタマイズしてサムネイルを表示させるようにしてみた!

先日、@goryugoさんの「関連記事プラグインYARPPをカスタマイズしてLi …

写真 12-04-06 15 42 57.jpg
超簡単にブログをiPhoneなどのスマートフォンに対応させるWordPressプラグイン『WPtouch』を導入してみました!

こんにちは!PITEです! あったかくなってきましたねー(●´∀`●) 僕は寒が …

wordpress-article-adsense001.png
【収益化】WordPressで記事の途中(”続きを読む・moreタグ”部分)に広告やAdSenseを挿入する方法。

今日は一日何もしていなかったのでその分これから気合入れて記事量産します!ハイパー …

Number333 2012-04-03 17.05.32.jpg
「MAMP」を使ってMacにWordPressをローカル環境にインストールする方法を解説します!

僕は基本的にワードプレスの管理はFirefoxのアドオンFirebugを使って管 …