wordpressでgoogleMAPを埋め込みたいんだけど、ピンを立てたいし、検索窓も欲しいし、あんなこともこんなことも。。。そんなことが出来るプラグイン無いですか？と質問が。
検索すればSimple MapとかMapPress Easy Google MapsとかMaps Builderとか、プラグインは沢山出てくるけど、英語だったり有料だったり、欲しい機能が付いてなかったり。
しかも、2016年からgoogleMAPを使う場合、APIキーが必須になってます。
面倒ったらありゃしないｗ
意外と知られていないのか、マイマップ（一昔前は、Google Maps Engine）を使いましょうよ？
プラグインより使い勝手がイイですよ？
必要なのはgoogleアカウントだけ（のはず）
では、チョチョイと簡単に地図を作って埋め込むまでの手順を。
マイマップにアクセス
こちら → https://mapsengine.google.com/map/
「新しい地図を作成」をポチ
日本周辺の地図が表示されます。左には諸設定するための窓が表示されます。
”無題の地図”と表示されているところをクリックすれば地図の名前を変更できます。
※この地図の名前は、地図を埋め込んだ時にも表示されます
地図を作る
ピン（マーカー）、距離計測、ルート描画、ライン描画などgoogleMAPで出来ることは、ほぼできるので表示させたい地図を作っていきます。
マーカーを立てるときは登録されているスポットであれば、クリックすれば情報が出るので下の方にある「地図に追加」をクリック。
地図に追加したら、（右下にあるアイコン）マーカーのスタイル（アイコンや色)の変更、情報、写真・動画、ルート表示を追加できます。
という感じで、オリジナルのマップを作っていきます。
地図を公開する
さてさて、地図が出来上がれば、次は公開しなければなりません。
が、デフォでは非公開設定になっています。なので、「共有」をクリック
「アクセスできるユーザー」の”非公開 – 自分だけがアクセスできます”の”変更”をクリック
「オン-ウェブ上で一般公開」に変更して保存
以上で、埋め込み準備が出来ました。
では、実際に埋め込み作業へと(/・ω・)/
埋め込みコードの取得
地図名の横にあるオプションを開きます
「自分のサイトへ埋め込み」をクリックするとiframeの埋め込みコードが表示されるので、コピペ！
で、貼り付けた結果が、こちら↓
ただし、このままだとスマホではみ出しますｗ というわけで、
レスポンシブにする
表示された埋め込みコードの
width=”640″をwidth=”100%”にするだけ
レスポンシブ化したのがこちら↓（width=”90%”にしてます）
※PCで見てる方は、ブラウザをグリグリっと幅を小さくしてもらうと違いがわかります。スマホで見てる方は、上の地図が画面からはみ出してるはず
この方法の最大のメリット
地図のマーカーをクリックしてみてくださいな。
googleの情報を、そのまま使える！！
ということなんですよ^^
アイコンも豊富。操作性も抜群。もちろん日本語対応。
プラグインを使って、あーでもねぇ、こーでもねぇ＼(*｀∧´)／ ﾑｯｷｰ!!なんてストレスはありませんよ^^
- 投稿タグ
