食べ歩きの感想やレビューを書いているブログで近所のお店が書かれていると、ついついお店を調べたりしちゃいますよね。
そんな時に、ブログの記事内にお店への地図と公式サイトへのリンクがまとまっていたら非常に便利なのになぁ　とか思ったりしました。

ということで、今回は「JavaScriptとグーグルマップを組み合わせてコメントやリンクを設定したオリジナルマップを表示する方法」に関して記載します！

今回の記事を読むことで、下記のようなグーグルマップを表示することができるようになります。

※弊社では関連記事として下記のような記事も書いています。

GoogleMapsのAPIキーを取得する

JavaScriptを使用してグーグルマップに何かしらの処理をする際には、APIキーが必要となります。
そのため、まず初めにAPIキーの取得を行いましょう。

下記の記事を参考にしてAPIキーを取得して下さい。
Google Maps APIを使って、サイト上に地図を表示するまでの流れ

HTMLタグとJavaScriptのコードを設置する

今回は例として、相模原市の横山台周辺のラーメン店二点にピンを立てて、ピンをクリックをした際にコメント、画像、リンクを表示してみます。
実際のコードは下記になります。

<div id="map_canvas" style="width:100%; height:500px;">
</div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API key]&callback=initMap"></script>
<script type="text/javascript">
<!--
  var map;
  var marker = [];
  var infoWindow = [];
  // マーカーに設定するタイトル・緯度・経度・内容
  var markerData = [ {
      title: '壱発ラーメン',
      lat: 35.567675,
      lng: 139.361022,
      content: '壱発ラーメン 相模原店<br><img src="./ippatsu.png" width="200"><br><a href="http://ippatsu.co.jp/" target="_blank">公式サイトはコチラ！</a>'
    }, {
      title: 'とんこつらーめん七志',
      lat: 35.568550,
      lng: 139.361146,
      content: 'とんこつらーめん七志 相模原横山台店<br><img src="./nanashi.png" width="200"><br><a href="http://www.nanashi-food.com/" target="_blank">公式サイトはコチラ！</a>'
    } ];
   
 // 地図の作成
  function initMap() {
    // 緯度経度のデータ作成
    var mapLatLng = new google.maps.LatLng({lat: 35.568199, lng: 139.361119});
    // 地図の基本設定
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: mapLatLng, // 地図の中心座標を指定
      zoom: 18, // 地図のデフォルトのズーム指定
      mapTypeId: google.maps.MapTypeId.ROADMAP // マップの表示種別選択 (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
    });
    
    // マーカー毎の処理
    for (var i = 0; i < markerData.length; i++) {
      // 緯度経度のデータを作成
      markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']});
      marker[i] = new google.maps.Marker({
        position: markerLatLng, // マーカーを立てる位置を指定
        map: map, // マーカーを立てる地図を指定
        title: markerData[i]['title'] // ツールヒント
      });
      
      // 吹き出しの設定
      infoWindow[i] = new google.maps.InfoWindow({
        // 吹き出しに表示する内容を設定する
        content: markerData[i]['content']
      });
      
      // マーカーにクリックイベントを追加
      markerEvent(i);
    }
  }
   
  // マーカーにクリックイベントを追加
  function markerEvent(i) {
      marker[i].addListener('click', function() {
        // 吹き出しの表示
        infoWindow[i].open(map, marker[i]);
    });
  }
//--?>
</script>

上記のコードは下記記事を参考にして作成しました。
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる

緯度と経度の取得方法

地図のデフォルトの位置や、ピンの位置を設定する際には「緯度」と「経度」の設定が必要になります。
緯度と経度を取得する簡単な方法を二つご紹介します。

緯度と経度を取得できるサイトを利用する

下記のサイトから緯度と経度を取得する事ができます。
Googleマップで緯度・経度を求める

検索入力欄に検索したい場所を入力して、検索ボタンをクリックするだけで緯度と経度が取得できます。

グーグルマップのURLから緯度と経度を取得する

上記検索サイトだけでなく、実際にGoogleMapで検索した際のURLから緯度と経度を取得する事もできます。

例えば「壱発ラーメン 相模原店」をGoogleMapで検索すると下記のようなURLが表示されます。
“https://www.google.co.jp/maps/place/%E5%A3%B1%E7%99%BA%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3+%E7%9B%B8%E6%A8%A1%E5%8E%9F%E5%BA%97/@35.567675,139.3588333,17z/data=!3m1!4b1!4m5!3m4!1s0x6019028344f8deff:0x572e2d084aa078e4!8m2!3d35.567675!4d139.361022″

上記URLの”@35.567675,139.3588333“の部分が緯度と経度になります。

※小数点以下の数値に若干の揺らぎがありますが、気にしないで大丈夫です。

上記のいずれかの方法で取得した緯度と経度を使用することで、自由にマップの位置やピンの場所をカスタマイズすることができます！

ユーザーが求めている情報を掲載するWebサイトを目指しましょう！

いかがでしたか？

グーグルマップをページに表示することで、今まで以上に多くの情報を提供できるようになりますので、ユーザーにとって便利なサイトになりそうですね。

ちょっと話がズレてしまいますが、ふと「何故グーグルさんはグーグルマップをカスタマイズするサービスを提供しているのか？」ということを考えてみました。
おそらくですが、提供する一つの理由としては、各々のサイト（またはページ）で調べ物が完結して欲しいという考えがあるのではないでしょうか。

私は頻繁にYoutubeを見るのですが、Youtubeで何かを見る際には、関連動画に飛ぶことはあっても調べる事はほとんどありません。
おそらくですが、グーグルさんはYoutubeのように調べる行為すらも省いたようなサイトを作って欲しいからこそ、いろいろなサービスを提供しているのではないでしょうか。

Youtubeのように、ユーザーが調べる行為を不要とするWebサイトにしていくためには、Webサイトの管理者が「ユーザーさんは何を求めているか？」を考えながらページを作るしかありません。
非常に難しい事ですが、今後はそういったことを考えて作られたWebサイトが求められるのだと思います。

私もまだまだできていないことなので、ブログの投稿を続けてレベルアップしていきたいです！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

降雪の翌日に、駐輪場の自転車が泥だらけになっていて憂鬱な気持ちになった網干です。
どうやら、家の屋根の雪が滑り落ちた際に泥が跳ねて自転車が犠牲になったようです…。
駐輪場に屋根はあるのですが、こればかりはどうやっても回避できません…(´・_・`)

というわけで、今回はWordPressのGoogleMap作成プラグイン「Maps Builder」を使って、複数のピンを立てた地図をサクッと作る方法をご紹介致します。

今回の記事を読むことで、下図のようなGoogleマップが作成できます！

無料でお手軽なGoogleMap作成プラグイン「Maps Builder」をWordPressにインストールする

まずはじめに、WordPressに「Maps Builder」をインストールします。

WordPressの管理画面から[プラグイン]→[新規追加]で、右上のキーワードに「Maps Builder」と入力してください。

「Maps Builder」を入力すると「Maps Builder – Google Maps Plugin」というプラグインが表示されます。
プラグインの右上の「今すぐインストール」を押してください。

インストールが終わると「有効化」ボタンが出現しますので、有効化を押してください。

有効化を押すと、先ほどまでサイドバーになかった「Google Maps」という項目が追加されます。

これで、「Maps Builder」のインストールは完了になります。

GoogleMapの基本設定を行うために「Maps Builder」の初期設定を行う

サイドバーの[Google Maps]を押して下さい。

[Google Maps API Key]の設定

APIキーの取得方法に関しては、下記のURLを参考にしてください。
Google Maps の APIキー を簡単に取得する

上記の方法で取得したAPIキーを[Google Maps API Key]の項目に入力してください。

[Default Location]の設定

LatitudeとLongitudeの数値はGoogleMapを使って出します。
GoogleMapで中心地点の場所を検索すると、URLに下記のような数値がついています。
「!3d」から「!4d」までの数値がLatitudeの値、「!4d」から末尾までの数値がLongitudeの値となっています。

今回は弊社事務所の位置を中心に設定します。

GoogleMapにピンを立てる

すると、[Default Location]で設定した位置を中心にしたGoogleMapのプレビュー画面が表示されます。

まずはじめに、「ここにタイトルを入力」の箇所に今回作成するマップのタイトルを設定します。
今回は弊社の周辺の施設紹介マップを作成したいので「Incloop周辺施設の紹介」とします。

次に、マップにピンを立てていきます。
プレビュー画面の下の方へスクロールすると[Map Markers]の項目があります。
マップへのピン立ては[Map Markers]の[Create Marker]の項目で行います。

では早速、実際にピンを立てていきましょう。

ピンの一つ目は弊社事務所のある「相模原商工会議所」にピンを立ててみます。
[Create Marker]に「相模原商工会議所」を入力すると検索候補が出現します。

検索候補の一番上の場所で設定したいので、上の項目をクリックします。
すると、プレビュー画面に緑のマーカーが設定されます。

まだこの時点ではマーカーが確定していないため、仮のピンが立っている状態になります。
緑のマーカーをクリックすると住所が表示されますので、正しい位置であることを確認します。

ピンを立てたい場合は[Add to Map]のボタンを押して下さい。

すると、ピンが確定してマーカーが赤色のおなじみのマークになります。

さて、ここからがこのプラグインの凄いところです！
ピンを立てた場所に、情報を追加するテキストフィールドが表示されていることにお気づきでしょうか！

このテキストフィールドには、付加情報を追加することができるのです！

画面上で「相模原商工会議所」となっている箇所にはピンのタイトルが入りますので、弊社の名前「Incloop株式会社」に変更します。
下のテキストフィールドは追加の情報入力項目になりますので、弊社の情報を記載します。

しかし、このままではスマホで見た際にホームページも電話番号もワンタッチで操作できないのが不便…。
と、思いきや！
なんと、この項目はHTMLタグに対応しているため、こんな書き方ができてしまうのです！

この状態で[Save]ボタンを押してピンを確定します。

これでピンの設定は完了になります。
ちなみに、設定したマーカーは下記の箇所をクリックすることでマーカーの設定が表示されますので、変更することもできます。

では、同じ方法でどんどん周辺のピンを追加していきます。

これで、ピンの追加は終わりました。
次に、マップを表示する際の中心座標を設定します。
右側のサイドバーの[Display Options]をクリックしてメニューを表示します。
サイドバーの[Latitude]と[Longitude]に中心にしたい座標を設定します。
ここでは弊社の位置を中心に設定します。
※値を設定してもマップのプレビュー画面が移動しない場合は[Longitude]の下部に[Update]等のボタンがありますので、ボタンを押して下さい。

以上で、マップの設定が完了になります。
サイドバーの[公開]または[更新]ボタンを押してマップを確定します。

これで、ピン付きのマップの作成が完了しました！

複数のピンを設定したGoogleMapを記事に表示する

投稿記事の編集画面に移動して、ショートコードをペーストします。

表示されました！
ピンをクリックすると詳細のリンクもしっかりと設定されています！

これで、HTMLタグを埋め込んだ複数のピンを立てたGoogleMapを作成することができました。

いかがでしたか？

WordPressのプラグインは数が非常に多いため、好みのプラグインを探すのはなかなか大変なんですよね…。
ですが、プラグインが見つかれば作業時間を大幅に減らすことができるので、WordPressで何かをする際には必ずプラグインを探すことから始めるのが良いかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

世界文化遺産に登録するように勧告を受けた「軍艦島」、正確な名称は端島（はしま）という名前の島で長崎県長崎市にある島です。

軍艦島とは

明治時代から昭和時代にかけては海底炭鉱によって栄え、東京以上の人口密度を有していたが、1974年（昭和49年）の閉山にともなって島民が島を離れてからは、無人島である。軍艦島（ぐんかんじま）の通称で知られている。2015年5月にイコモスは軍艦島を構成遺産に含む「明治日本の産業革命遺産」を、世界文化遺産に登録するよう勧告した。正式採用は同年6月の第39回世界遺産委員会で決定される。

Wikipediaより

来月には世界文化遺産に登録される可能性があるということです。

そんなこともあり、軍艦島に関心を持ったのでGoogleマップで見てみようと思ったところ・・・

なんと！ストリートビューで見ることができるようになっていました！

長崎市の協力のもと、立入禁止区域や屋内を含む島内全域を撮影した端島のGoogle ストリートビューが、2013年6月28日に公開された。

Wikipediaより

しかも、公開されたのは2013年6月なので、1年前でした。。。古い情報で申し訳ないです。。。

さっそくGoogleマップで「軍艦島」へ

船で軍艦島に到着しました。

上陸したところ。

ベルトコンベアーだったようです。

端島小中学校。鉄筋コンクリート7階建て。

社宅が立ち並んでいます。

コンクリートの劣化が激しくなっています。

昭和初期に建築されたとは思えないくらい近代的です。

反時計回りで船着場に戻ってきました。

昭和時代を知ることができる貴重な体験ができます

今回、軍艦島についていろいろと調べ、そして知ることができました。

この軍艦島が世界文化遺産に登録されるかどうかはまだ未定ですが、過去を学ぶ貴重な遺産であることは間違いないと思います。

ぜひストリートビューでご覧になってください！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

過去３回にわたって春の統一地方選挙をテーマにして、「有権者の関心を計測」「ポスターの配色」「キャッチコピーの考え方」を書かせて頂きましたが、今回は”選挙のお役立ちツール”としてのGogoleマップの使い方をご紹介いたします！

Googleマップでポスター掲示場設置場所を地図にプロットしてみました！

選挙のポスター掲示は大変です。相模原市中央区においても設置場所が282箇所もあります。。。

立候補者の方の手元には紙の資料と、手描きの地図が配布されていることだろうと思います。

チームで手分けしてポスターを掲示することになりますが、紙を印刷するのは大変だし、スマホで下図のようなマップを見ることができれば便利ですよね。

さらに、ポスターを貼りに行く担当者ごとに色分けをしたりして！

• ピンクはA班の担当ね！
• 黄色はB班の担当ね！

という感じで割り振れたらわかりやすいですね。

もちろん、Googleマップですのでスマホでも見れます。手元のスマホで位置を確認しながら移動ができるわけです。
さらに、複数人でマップを共有することもできます。
見て頂けると分かりますが、紙の地図よりもはるかに便利です！！

作り方はかんたん

ステップ１　Excelで住所リストを作成する

下図のような一覧表を作成するだけです。
先ほどのように、担当者ごとに色を分けたい場合は、「担当」という列を作っておきます。

この表を「ポスター設置場所」などのファイル名でデスクトップに保存しておきます。
住所の一覧は選挙管理委員会から提供されたものを活用しております。

ステップ２　住所リストをGoogleのマイマップに取り込む

取り込む方法は、以前の記事「実践3分！顧客住所を地図上に売上別・色変えプロットしてみる」の「ステップ２：Googleマイマップにアクセスし、Excelファイルをインポートする」をご覧ください。

• 実践3分！顧客住所を地図上に売上別・色変えプロットしてみる

担当者ごとに色分けをする場合は同記事の「ステップ３：ABCランクごとに色分けをする」をご覧ください。
「ランク」を「担当」に読み替えていただければ大丈夫です。

とは言え、作るのが面倒・・・

そんな方には有償になってしまうのですが、代行でお作り致します。

以下のフォームからご相談ください。

パソコン、またはスマホがあれば、誰でもブラウザにURLを入力するだけで以下のようなマップを見ることができます。
※アプリなどは不要です。

ポスターが掲示されない場所を重点的に回るなど、戦略を立てる際にも使えそうです。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。