Googleマップを埋め込む [2016年版]

WEB / IT

Webサイトやブログに無料で埋め込みできるGoogleマップ(Google Maps API)はとても便利な機能ですよね。店舗や事務所が増えるたびに地図をイラストで描き起こす必要もなくなり、データを登録するだけでGoogleマップ上で所在地を示すことができます。

便利な反面、APIの仕様も日々新しくなっていますので以前と使い方が変わってきています。

本記事では2016年1月時点のGoogleマップの便利な使い方や埋め込み方法をご紹介します。

スポンサーリンク

マイマップを作成する

GoogleマップをWebサイトに埋め込むには「マイマップ」を作成する必要があります。Gmailアカウントでログインした状態でGoogleマップにアクセスしてください。ログイン状態でないと「マイマップ」のメニューが表示されませんので注意してください。

Googleマップ画面左上にあるメニューボタンをクリックします。

000

表示されたメニューの「マイマップ」をクリックします。

001

メニュー下部の「地図を作成」をクリックします。

002

無題の地図」と「無題のレイヤ」が表示された画面に切り替わります。シンプルなマップを作成する場合はあまり気にする必要はありませんが、「無題の地図」が大分類、「無題のレイヤ」が小分類とイメージしておきましょう。

これらは仮の名称ですので任意の文字列に変更できます。後で識別しやすいように変更しておきましょう。文字列を変更するにはそれぞれの名称部分をクリックすれば編集画面に移ります。

003

例として、私は下記の名称に変更しました(深い意味はありませんので気にしないでください)

004

では、住所データを登録してGoogleマップ内にピン(マーカー)を立てていきましょう。

Googleマップにピンを立てる

Googleマップ(マイマップ)に店舗や事務所などの位置を示すピンを立てていきます。

単一のピンを立てる

店舗や事務所の所在地(住所)を登録することで地図上にピン(マーカー)を立てることができます。単一の場合は施設名や住所で検索する方法が一般的です。

下記の例では、ピンを立てたい名称で検索しています。もちろん住所でもOKです。

005

検索結果として左側のメニューに緑色のピンのマークが表示されます。同時に右側の地図エリアにも同じ色のピンマークが表示されます。今はまだ確定ではなく候補の状態です。

その候補で問題なければ左側メニューの候補にマウスオーバーします。「+」マークが表示されますのでクリックしましょう。

006

ピンが赤色に変われば追加完了です。

007

複数のピンを立てる

店舗や事務所の所在地を複数登録することで地図上に複数のピン(マーカー)を立てることができます。複数のピンを立てる場合、ひとつずつ住所を登録すると時間がかかりますので、エクセルで住所リストを作成してGoogleマップにインポートする手段がおすすめです。

ピンを立てるデータが記載されたエクセルデータを事前に作成しておきます。ピンを立てる名称と所在地のデータがあればその他の項目は自由で構いません。どの列を所在地として使用するかは後ほど指定できます。1行目に項目名を入れておくと便利ですよ。

例として以下のようなエクセルデータを準備しました。

008

データを取り込むには、左側メニューの「インポート」をクリックします。

001

エクセルなどで作成したデータを下記の赤枠エリアにドラッグするか、中央の「パソコンからファイルを選択」ボタンをクリックしてファイルを選択します。

002

「目印を配置する列の選択」では住所や施設名が記入されたエクセルの列(項目)を選択します。今回の例では「所在地」の列を選択しています。

チェックを入れたら「続行」をクリックします。

003

「マーカーのタイトルとして使用する列」ではマーカーをクリックした際の表示名にしたいエクセルの列(項目)を選択します。今回の例では「区役所名」の列を選択しています。

チェックを入れたら「完了」をクリックします。

004

しばらくすると画面が切り替わり、マイマップ上にピンが立てられます。

005

Googleマップをサイトに埋め込む

ここまでで作成したマイマップを自分のサイトに埋め込むことができます。

マイマップを共有する

ホームページに埋め込むにはマイマップを共有する必要があります。左側のメニューにある「+共有」のリンクをクリックします。

006

ページ中段にある「アクセスできるユーザー」が「非公開 – 自分だけがアクセスできます」となっていますので、右側にある「変更」をクリックします。

007

「リンクの共有」で「オン – ウェブ上で一般公開」を選択して「保存」をクリックします。

008

元の画面に戻りますのでページ下部の「完了」をクリックします。

009

これでマイマップの共有設定は完了です。

埋め込み用のタグを取得する

埋め込み用のタグを取得します。

左側メニューの「縦に3つの点が並んだボタン」をクリックし「自分のサイトに埋め込む」をクリックします。

010

中央に表示されたソースを自分のサイトに設置すればGoogleマップの埋め込みができます。

011

例として作成したマイマップを実際に埋め込んでみました。

マイマップを削除する

作成したマップが不要になった場合は削除することができます。

Googleマップの画面左上のボタンをクリックします。

013

左側メニューの「マイマップ」をクリックします。

012

マイマップをすべて見る」をクリックします。

014

削除したいマイマップにチェックを入れて「選択」をクリックします。

015

下図の赤枠のボタンをクリックします。

016

この地図を削除」をクリックします。

017

「この地図を削除してもよろしいですか?」と聞かれますので「削除」をクリックします。

018

これでマイマップの削除は完了です。

最後に

Googleマップの豊富な機能や使い方を知ることで、より自分の目的に合った埋め込み方法ができると思います。

ご紹介した使い方以外にも知っておくと便利なことがたくさんありますので、こちらの記事に少しずつ追加していきたいと思います。

関連記事:モニター解像度のシェアを調べてみた(2016年6月版)

ジムで使えるLINEスタンプです

ゆれる白いトリ

キノカッパ

タイトルとURLをコピーしました