更新日時:2019.04.28
実現する機能
自宅兼店舗の地図作成を頼まれたので、GoogleMapで簡単にマーカーを立てられると思い安請け合いしたのまでは良かったのですが、・・・できない、ということが判明。仕方がないので、またまたGoogle Maps JavaScript API V3の使い方サイトのお世話になることにしました。が、これまた今（2019.04.21）はできない、ということが判明。無料のサービスではなくなったことが理由のようです。そこで、あくまで無料で表示させる方法を探したところ、今回は以下の方法で店舗情報を表示させました。GoogleMapの利用にこだわるのは、もちろん最新の地図情報を利用できることと、地図の拡大縮小表示ができるので利用者が確実に場所を特定できるということが理由です。
以下は構築手順の備忘録です。
事前準備
無し
サイトに地図を表示させるまでの手順
1 Google Map のサイトを開きます。表示された画面の赤枠1の「Googleアプリ」をクリックして、赤枠2の「マップ」をクリックします。（図はクリックすると拡大表示されます。以下同じ）
2 地図の右下にある赤枠の「+」をクリックして、表示させたい場所の地図を最大表示させます。
3 表示させたい場所にマーカーを付けるのであれば、その場所をWクリックします。赤いマーカーではなく、赤枠1のようなマーカーが表示される場合は、同時に表示される赤枠2のその場所の名前をクリックします。マーカーが何も表示されない場合には、赤枠3のように目的の場所の近くにある名称の入った建物等をクリックします。お店や会社名を表示させたいのであれば、「Google マイビジネス」に登録することをオススメします。
4 赤枠1のように赤いマーカーが表示されると、同時に赤枠2も表示されるのでクリックします。
5 表示される一覧から、赤枠の「地図を共有または埋め込む」をクリックします。
6 表示される画面の赤枠「地図を埋め込む」をクリックします。
7 表示される画面の赤枠「HTMLをコピー」をクリックします。
8 地図を表示させたいサイトの管理画面から地図を表示させたいサイトをHTML表示させ、<body>と</body>の間に7でコピーしたものを貼り付けます。貼り付けた内容は<iframe …>から</iframe>までになります。
<!!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> ... ... <iframe src="https://www.google.com/maps/embed?pb=...5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> ... ... </body> </html> |
9 貼り付けが終わったらそのファイルを保存して、サイトのURLを入力して表示させます。以下のように地図が表示されたら成功です。
コメントを残す