Web技術系中心に割と何でも更新中

Googleマップ埋め込みをカスタマイズしてアプリ起動させる方法

Programming Web

Web制作者

Web制作者
「Googleマップ埋め込みに加えて、アプリで開くボタンを設置してアプリ起動させたいけどいい方法無いかなぁ…。」

こういった疑問にお答えします。

本記事の内容

  • Googleマップ埋め込みにアプリで開くボタンを設置する方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Webサイトに住所の情報を掲載する時に、Googleマップ埋め込みがよく利用されています。Googleマップを埋め込み、それに加えて「Googleマップで見るボタン」を設置する方法を紹介します。

この記事で紹介する方法では、PCとスマホでボタンを押したときの動作を変えてみます。PCはGoogleマップページに飛んで、スマホはアプリを起動してアプリで表示させます。

仕様

今回は下記のような仕様で実装を考えてみました。

Googleマップとボタンの仕様

  • Googleマップはレスポンシブ対応する
  • PC画面でボタンをクリックしたら、別画面でGoogleマップページが開く
  • スマホ画面でボタンをクリックしたら、Googleマップアプリが起動する

仕様通り、PCとスマホの動作を変えるために横幅736pxをブレークポイントに設定します。736px以下はスマホの動作、736pxよりと大きい場合はPCの動作を行うようにします。

スマホでアプリを起動した時に「Google Mapsで開きますか?」というポップアップが表示されるので、「開く」をタップするとアプリが起動します。

アプリの起動に関してはスマホはiOSでのみ動作確認済みです(Androidでは未確認)。

Googleマップ埋め込みとGoogleマップで見るボタンの実装方法

ボタン設置イメージ

Googleマップで見るボタン

Googleマップの埋め込みと、Googleマップで見るボタンのイメージはこんな感じです。

ここから実装方法を詳しく説明します。

HTML

<div class="map_info">
	<div class="ggmap">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4927284224104!2d139.68951651561215!3d35.68949063712562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0x2f37ccbb974b1193!2z44CSMTYwLTAwMjMg5p2x5Lqs6YO95paw5a6_5Yy66KW_5paw5a6_77yS5LiB55uu77yY4oiS77yR!5e0!3m2!1sja!2sjp!4v1575802314600!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
	</div>
	<a class="googlemap_link" target="_blank" href="https://goo.gl/maps/z6t8S4sD2qjRSk7S8">Googleマップで見る</a>
	<a class="googlemap_app" target="_blank" href="comgooglemaps://?q=〒160-0023 東京都新宿区西新宿2丁目8−1">Googleマップで見る</a>
</div>

この記事では例として、東京都庁の住所を使います。
〒160-0023 東京都新宿区西新宿2丁目8−1

Googlマップを埋め込む

Googlmeマップを埋め込み手順

ggmapクラスの子要素として、Googlマップ埋め込みHTMLをコピーして貼り付けます。

Googlマップを埋め込み手順

  • Googleマップにアクセス
  • 住所を入力する(郵便番号から)
  • 共有リンククリック
  • 共有モーダルの「地図を埋め込む」を選択
  • HTMLをコピー

基本的に、上のキャプチャ画像と説明を参考にすれば簡単に埋め込みできます。

「Googleマップで見るボタン」を設置する

<a>タグをPC用とスマホ用2つ設置します。

付与クラス名

  • PC用:googlemap_link
  • スマホ用:googlemap_app

PCとスマホでhref属性の設定が異なりますので、それぞれ説明します。

PCはGoogleマップのURLを設定

GoogleマップURL設定手順

GooglマップURL取得手順

  • Googleマップにアクセス
  • 住所を入力する(郵便番号から)
  • 共有リンククリック
  • 共有モーダルの「リンクを送信する」を選択
  • リンクをコピー

スマホはcomgooglemapsを設定

comgooglemapsと呼ばれるスキームというものをもっているので、これに住所の文字列をパラメータで渡すことで、クリック時にGoogleマップアプリが起動するようになります。

comgooglemaps://?q="住所の文字列"

href属性に上記コードを設定します。

CSS

.map_info {
	position: relative;
}
.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.googlemap_link,
.googlemap_app {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: #f74444;
	font-size: 14px;
	padding: 3px 15px;
	color: #ffffff;
	text-decoration: none;
}
.googlemap_link {
	display: block;
}
.googlemap_app {
	display: none;
}

@media only screen and (max-width: 736px) {
.googlemap_link {
	display: none;
}
.googlemap_app {
	display: block;
}

Googleマップをレスポンシブ対応させるために、要素をwidth:100%;にして、縦横比を保つためにpadding-bottom: 56.25%;を設定しています(ちなみに「56.25」というワードで検索するとGoogleマップやYouTubeなどの埋め込みに関するページなどヒットします)。

「Googleマップで見るボタン」は、今回の仕様ではposition: absolute;で、右下に設置していますが、設置場所は自由に変えてください。マップ上が煩雑になるようであればマップの下に設置するのもいいでしょう。

736pxをブレークポイントとして、リンクの表示非表示を切り替えています。

まとめ

Googleマップ埋め込みにアプリで開くボタンを設置する方法について、再度まとめます。

ポイント

  • Googleマップを公式の手順通りに埋め込む
  • アプリで開くボタンを設置する
  • href属性にcomgooglemapsを使用して住所の文字列を設定する

アプリの起動については、少し強引な手法でしたが、一応こういうこともできるよということで、もしこういった要望があれば参考にしてみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果