WordPress で運用しているブログ記事の中に Google マップを埋め込む場合、今までは Simple Map というプラグインを使っていました。
便利に使わせていただいていた Simple Map プラグインですが、下記のような点が気になり始めました。
Simple Map プラグインの問題点
- Simple Map プラグインは二年前から更新されておらず、今後アップデートされるのか不安になってきた。
- 埋め込んだ地図の中に「ルート」みたいなボタンが表示されない。
プラグインは「Google Maps API キー」が面倒
Simple Map に限らず、Google マップ系のプラグインは「Google Maps API キー」の登録が必須、また、設定方法がややこしい。
また、API キーを使った Google マップは表示回数が多いと課金が発生する。もちろん、課金が発生しないように表示数の制限はできますが、表示回数の制限を超えるとマップ自体が表示されなくなります。
Google マップ標準の埋め込みコードに乗り換え
ということで、Google マップ標準の埋め込みコードを使う方法に地図の表示方法を変更しようと思います。
Google マップから取得できる埋め込みコードだと表示回数の制限なく無料で使えますし。
ただ、Google マップ標準の埋め込みコード使った場合でも下記のような点が気になりました。
- 埋め込みコードを取得するときにいちいち埋め込みサイズの指定をしなければいけないのが面倒。
- そもそも、自分のブログでどのサイズで埋め込んでたか覚えてない（笑）
- テーマを変えて、本文部分の横幅が変わった時にすべての記事のマップの幅を修正していくのが面倒。
- CSS で幅を調整してもよいが、いちいち class を付けるのが面倒。
埋め込みコードを変更せず地図の横幅を調整する CSS を書いた
ということで、コピーした Google マップ標準の埋め込みコードにはいっさい手を加えず、地図の横幅を調整するために下記のような CSS を書きました。
/* Google マップ */
iframe[src^="https://www.google.com/maps/embed"]{
width: 100%;
height: 450px;
border: 1px solid #ccc !important;
}
CSS で iframe の src が特定の URL の時に表示方法を変える作戦です。
こうしておけば、埋め込みコードを取得する時のサイズが「小・中・大・カスタムサイズ」のどのコードでも表示がコントロールできます。
便利になった！
