WordPressにGoogleMap（グーグルマップ）の地図を表示させる方法
たまには、WordPressとWebサイトの勉強をしようと思ってGoogleMapを利用してみました。特に意味はないんですけど、いつか使うかな？程度です。
こんにちはkekekeです。
利用シーンとしてはネットショップとか企業サイトとかでしょうか。
プラグインを入れて行う方法もあったんですが、プラグインを入れて管理する手間考えたら自分で入れたほうがいいです。
Webブラウザ上での操作
とりあえずグーグルマップに移動します。GoogleMap
今回は横浜のランドマークタワーにします。
検索窓にランドマークタワーを入力し、共有を選択
もし、該当箇所がうまく表示されない場合は地図上でダブルクリックを行いピンを差し込むことでサイドバーに共有の画面を出すことができました。
次に表示されるホップアップ画面で、地図を埋め込むタブを選択し、
表示されるHTMLをコピーします。
WordPress上での操作
投稿などのエディタ画面でビジュアルからテキストに変更。
任意の場所にWebブラウザでコピーしたHTML文を貼り付け。
サンプル表示
練習がてらサイトに貼ってみる。
サイズ中 ランドマークタワー width=”600″ height=”450″
サイズ大 ベイシェラトンホテル width=”800″ height=”600″
まとめ
何か特別なことをしなくちゃいけないのかと思いましたが、GoogleMap側がHTML文をiFrame形式で用意してくれていたので特に行うことはなくコピペだけですね。
サイズを変更したい場合は地図を埋め込むのホップアップのときにプルダウンから大きさを変更できます。小、中、大とカスタムサイズの4種が用意されていたので任意のサイズに変更できます。
おしまい。
