bingo!CMSニュースレター

配信:2020年5月27日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像(ニュースレタートップ用)

あなただけの地図、Googleマイマップをつくろう


こんにちは! bingo!CMS 広報担当の鈴木です。
 
本日は、『Googleマイマップ』の基本的な作り方をご紹介します。
 
『Googleマイマップ』とは、Google Mapを利用してオリジナルの地図を作るサービスです。
あらかじめ複数のスポットや経路を登録し、まとめて表示させることができます。
 
 

まずは完成形のご紹介

Googleマイマップ 完成イメージ
画像引用:Googleマイマップ

このサンプルは、私が以前訪問した美術館・博物館などの中から、独断と偏見でおすすめを5箇所選んで作成しました。
この程度の情報量であれば、ものの数分で完成します。
 
作成した地図は、以下の方法で共有が可能です。
  • 地図へのリンクを取得する
  • 埋め込みコードを取得する
 
この地図をサイトに埋め込む場合、APIキーは使用せず、iframeで表示します。
そのため、細かなカスタマイズや調整などはできません。
 
また、APIキーを利用して地図を表示する場合、クレジットカードの登録や使用の上限を超えた場合に課金が発生しますが、iframeの場合は、現状は無料で使用できます。
 
ただし、これらは本記事執筆時点での情報のため、ご自身のサイトに使用する際には、事前にGoogleの利用規約などをご確認ください。
 
 

さっそく作ってみよう

Googleマイマップの作成手順1(Google マップを開く)
画像引用:Googleマイマップ

Googleアカウントにログインした状態で、『Google Map』を開きます。
左上のメニューから、『マイプレイス』→『マイマップ』と選択します。
『マイマップ』の下部にある『地図を作成』をクリックすると、『無題の地図』と書かれたマイマップの作成画面が開きます。
 

タイトルとレイヤを編集する

Googleマイマップの作成手順2(タイトルとレイヤを編集する1)
画像引用:Googleマイマップ

『無題の地図』をダブルクリックすると、地図のタイトルと説明を編集する画面が開きます。
適宜入力し、保存します。
こちらは後からでも編集可能です。
 
Googleマイマップの作成手順3(タイトルとレイヤを編集する2)
画像引用:Googleマイマップ

続いて、『無題の地図』の少し下にある『無題のレイヤ』をダブルクリックして編集します。
『レイヤ』とは、カテゴリ分けやラベルのような機能で、完成した地図上で、スポットの表示切替などに使用されます。
こちらも後から編集可能です。
 

スポットを登録する

Googleマイマップの作成手順4(スポットを登録する1)
画像引用:Googleマイマップ

検索バーにスポット名を入れて検索すると、スポットにピンが立ち、住所などの概要が表示されます。
地図に追加する場合は、『地図に追加』をクリックします。
 
Googleマイマップの作成手順5(スポットを登録する2)
画像引用:Googleマイマップ

スポットを地図に追加したら、概要の下部にある鉛筆のようなマークをクリックし、スポットの説明文を入力して保存します。
 
Googleマイマップの作成手順6(スポットを登録する3)
画像引用:Googleマイマップ

概要の下部にあるバケツのようなマークをクリックすると、ピンのスタイル(デザインや色)を変更できます。
 
このように、目的地の検索と登録を繰り返すことで、複数のスポットを追加できます。
この他、スポットに対し画像や動画を添付したり、ルートの設定も可能です。
 

地図を共有する

Googleマイマップの作成手順7(地図を共有する1)
画像引用:Googleマイマップ

デフォルトでは、地図は作成者しか閲覧・編集ができません。
地図の閲覧・編集を許可するには、共有設定が必要です。
サイトにリンクを貼る、または埋め込んで不特定多数の人物に閲覧してもらうためには、地図の概要の『共有』をクリックし、『リンクの取得』を『リンクを知っている全員』に変更してください。
サイトにリンクを貼る場合は、変更後に表示されるURLをコピーして使用します。
 
Googleマイマップの作成手順8(地図を共有する2)
画像引用:Googleマイマップ

サイトに地図を埋め込む場合は、前述の共有設定を行った後、地図のタイトル横にある丸が縦にみっつ並んだメニューをクリックし、『自分のサイトに埋め込む』をクリックします。
表示されたHTMLをコピーし、サイトに貼り付けてください。
 
bingo!CMSの場合、HTMLユニットなどに貼り付ければ実装できます。
幅や高さなどは、適宜調整してくださいね。
 
とっても簡単なので、旅の計画や思い出の共有に利用するなど、ぜひ活用してみてはいかがでしょうか。
 
以上、お役に立てば幸いです。
 

それでは!
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ