こんにちは。コーダーの兼山です。
サイトに埋め込んだGoogleマップの縮尺を変更する方法をご紹介します。
GoogleMapの埋め込みについてはAPIを使う方法もありますが、今回は、iframeタグでの埋め込みで説明します。
サイトに埋め込んだGoogleマップの縮尺を変更する
※岐阜県庁を例にします。
岐阜県庁のマップ取得コードは以下の通り。
<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d828434.9852783473!2d136.40428839008672!3d35.79811264779371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6003aeeeeb1892d5%3A0x2cdffb16307033da!2z5bKQ6Zic55yM5bqB!5e0!3m2!1sja!2sjp!4v1553582912672″ width=”600″ height=”300″ frameborder=”0″ allowfullscreen=””></iframe>
上記コードの『!4f13.1』部分の『13.1』を任意の倍率に書き換えることで<iframe>で埋め込みをしたGoogleMapを拡大・縮小できます。
『13.1』は、1~180の間で変更可能。
数字が小さいほど倍率が高く、数字が大きいほど倍率が低くなります。
まとめ
ユーザビリティの面で役に立つと思います。
是非、ご活用ください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
ホームページ制作の「外注・下請け」をお探しですか?
RunLandは制作会社様のリソース補完として、コーディング・WordPress構築・保守・セキュリティを工程単位で承っています。「デザイン支給でコーディングだけ」「WordPress構築だけ」といった単発のご依頼にも対応します。
▶ 外注・下請けサービスを見る
外注費用の相場を見る →
この記事を読んだ方はこんな記事も読んでいます
…
…
…
…
…
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
こんにちは。コーダーの兼山です。 Webページのお問い合わせフォームなどで「私はロボットではありません」といった表示を見…
こんにちは。コーダーの兼山です。 コーディングでのテキストの装飾は、基本的なフォント指定以外では画像で処理するのが一般的…
こんにちは。コーダーの兼山です。 フォーム要素のテキストエリアの領域の拡大、縮小などのリサイズをCSSで制御する方法を紹…
…