また新しくなったGoogle MAP、埋め込み表示の縮尺を変更する

  • このエントリーをはてなブックマークに追加

Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。

URLが見慣れない形に

通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。
下記は当社の位置表示なのですが、srcに吐き出されるURLが以前と変わっています。引数が「!」で区切られ、見慣れない形へと変化。眺めていると、なんとなく緯度経度らしきものがあることが分かります。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.69346665625!2d139.70235538581707!3d35.659923229244505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b587b28bca9%3A0xad2f9ce323ad0331!2z44CSMTUwLTAwMDIg5p2x5Lqs6YO95riL6LC35Yy65riL6LC377yR5LiB55uu77yR77yS4oiS77ySIOOCr-ODreOCueOCquODleOCo-OCuea4i-iwtw!5e0!3m2!1sja!2sjp!4v1456451081274” width=”400″ height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

そのうち縮尺の引数は、下記の「13.1」の箇所にあります。上限と下限は分かりませんが(大体1~180程?)、こちらの数字を変更すると縮尺の変更が可能です。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.69346665625!2d139.70235538581707!3d35.659923229244505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b587b28bca9%3A0xad2f9ce323ad0331!2z44CSMTUwLTAwMDIg5p2x5Lqs6YO95riL6LC35Yy65riL6LC377yR5LiB55uu77yR77yS4oiS77ySIOOCr-ODreOCueOCquODleOCo-OCuea4i-iwtw!5e0!3m2!1sja!2sjp!4v1456451081274″ width=”400″ height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

数字を大きくすればするほど引きの地図になります。

▼デフォルト 13.1 の地図



▼ 1 の地図



▼ 80 の地図



Google MAPを住所や建物名で表示

このままではカスタマイズに不便なので、URLを分かりやすく書き変えてみましょう。記述方法として、ジオコーディングを使用します。ふきだしを隠したり、ピンを中心からずらしたり、という小技も可能です。

srcのURL中身「maps?」以降を欲しいステータスに合わせて書き変えます。例えば、「クロスオフィス渋谷」で調べる際は、「&q=クロスオフィス渋谷」と書きます。
その後ろに出力用のおまじない「&output=embed」を繋げればクロスオフィス渋谷で検索した状態のMAPが表示されます。

<iframe src=”http://maps.google.co.jp/maps?&q=クロスオフィス渋谷&output=embed” width=”400″ height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>



また、「&q=」は、検索文字列の扱いなので、住所以外にも緯度経度で貼りつけることも可能です。

文字列検索 q=〒150-0002+東京都渋谷区渋谷1丁目12−2+クロスオフィス渋谷 空白は「+」に置き変え
緯度経度 q=35.660307,139.703428 緯度経度の間に「,」


その他のステータスの引数は以下になります。欲しいオプションを「&」で区切って繋げてください。最後に出力の「&output=embed」を忘れずに。

縮尺 z=18 0~23
地図の中心点 ll=35.660307,139.703428 緯度と経度の間に「,」
ピンの位置を画面中央からずらすことができます※1
吹き出し iwloc=A A…表示
B…非表示
表示モード t=m m…地図
k…航空写真
h…地図+航空写真
p…地形図
e…Google Earth
言語 hl=ja ja…日本語
us…英語
zh-CN…中国語簡
zh-TW…中国語繁
ko…韓国語
th…タイ語※2

※1…地図上で右クリックし、「この場所について」を選択すると、地点の緯度経度を調べることができます
※2…他の言語が必要な場合は「GoogleMap hl」で検索。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

Webデザイン

【Photoshop】クリックするだけ!? AIで風景を置き換える新機能”風景ミキサー”の使い方

PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます! 目次1 どんな機能?2 使い方2.1 手順1:被写体を選択する2.2 手順2:フィルターを適用する2.3 完成3 YoutubeChannelのご紹介 どんな機能? 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にし […]

Webデザイン

【Illustrator】手書きのスキャン画像をパスデータにする

Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 目次1 「画像トレース」機能の使い方1.1 画像トレースパネルを開く1.2 スキャンしたデータをトレースする1.3 不要な部分を削除する2 YoutubeChannelのご紹介 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]>[画像トレー […]

Webデザイン

【Illustrator】長文をカラム分けして読みやすくする方法

リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 目次1 やり方解説1.1 手順1:四角オブジェクトを配置する1.2 手順2:四角オブジェクトをテキストボックスに変換する1.3 手順3:複数のテキストボック […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。