JavaScriptとグーグルマップを組み合わせてコメントやリンクを設定したオリジナルマップを表示する方法

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

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

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

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

incloop.com

3分でプロット・マッピング！エクセル顧客住所をGoogleマップの地図上に無料表示する

いいね！が300を超えそうです。ありがとうございます！「地図　プロット」「地図　マッピング」「グーグルマッププロット」などのキーワードで多くの方にご覧いただい...

自社の顧客を地図にプロットしマーケティング、営業管理等に役立てたいという企業様からのお問い合わせが増えております。

ピンを立てたところに営業担当を表示可能か？→可能です！
URLもついでに表示したいのですが？→可能です！
項目が増えても大丈夫ですか？→大丈夫です！

などなど、個別サポートいたします！（※サポート内容によっては費用が発生する場合があります。）
お気軽にお問い合わせください。

今回のブログの見出しはコチラです！

1 GoogleMapsのAPIキーを取得する
2 HTMLタグとJavaScriptのコードを設置する
3 緯度と経度の取得方法
4 ユーザーが求めている情報を掲載するWebサイトを目指しましょう！

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>

</div>

<!--

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>

※4行目の[API key]には自身のGoogleアカウントで取得したAPI keyを入力してください。

上記のコードは下記記事を参考にして作成しました。
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“の部分が緯度と経度になります。

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

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