mapに複数のマーカーを立てる - Google maps API - | フロントエンド

テンプレート上からマーカーを立てる
あとがき

Google maps APIを使ってmap上にマーカーを立てる方法です。
mapを表示するまでは前回の記事をみてください。
今回マーカーを立てるやりかたとして、テンプレートに直接書いてマーカーを立てる方法と、jsonファイルから取得してマーカーを立てる方法を紹介します。
jsonファイルでやると個人的にはファイルもすっきりと整理されて動的に出す（CMSを使う）ことも簡単にできるのでおすすめです。

テンプレート上からマーカーを立てる

前回の記事のテンプレートに追加記述をしていきます。
追加記述は３つです。

グローバル変数【maker】の宣言
マーカーデータの格納
マーカーの追加処理

グローバル変数【maker】の宣言。

グローバル変数【maeker】を宣言します。makerの中には空の配列を入れておきます。この中にはひとつひとつのマーカーのデータが入ります。
※関数initMapより前に記述

var marker = [];

マーカーデータの格納

変数【data】を宣言します。
多次元の連想配列の中にマーカーのデータを格納していきます。

var data = [ 
    {
        name: 'マーカー1の名前',
        lat: マーカー1の緯度,
        lng: マーカー1の経度 
    }
];

サンプルソース

var data = [ 
    {
        name: '名古屋駅',
        lat: 35.170897,
        lng: 136.881558 
    }, {
        name: '大名古屋ビルヂング',
        lat: 35.172311,
        lng: 136.884568
    }, {
        name: '国際センター駅',
        lat: 35.172038, 
        lng: 136.887701
    }
];

注意 : 連想配列の最後などには「カンマ（ , ）」は必要ありません。

マーカーの追加処理

dataに入っているマーカーデータの数だけfor分を回して、マーカーを追加する処理を行います。

for (var i = 0; i < data.length; i++) {
     markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 
       　marker[i] = new google.maps.Marker({ 
           position: markerLatLng, 
           map: map 
     });
}

position

positionは必須で、lat（緯度）,lng（経度）を指定してマーカーの初期位置を指定します。

map

mapは任意の項目で、マーカーを配置するマップを指定し関連付けます。
任意の項目ですが指定をしないとマーカーのみが作成され、マップに関連付けられないため地図上にマーカーが表示されません。

まとめの全体のソース

前回の記事では直接書いていましたが全体が長くなるので、今回からjsのみ別で読み込んでいます。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Google maps API</title>
    <style type="text/css">
		  html,body,#map {
  			height: 100%;
  		}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="mapscript.js"></script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
    </script>
  </body>
</html>

var map;
var marker = [];
var data = [ 
    {
        name: '名古屋駅',
        lat: 35.170897,
        lng: 136.881558 
    }, {
        name: '大名古屋ビルヂング',
        lat: 35.172311,
        lng: 136.884568
    }, {
        name: '国際センター駅',
        lat: 35.172038, 
        lng: 136.887701
    }
];
 
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.170981, lng: 136.881556} ,
        zoom: 15
	});
 
    for (var i = 0; i < data.length; i++) {
        markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 
        marker[i] = new google.maps.Marker({ 
            position: markerLatLng, 
            map: map 
        });
    }
 
}

jsonファイルからマーカーを立てる

やることは４つです。

グローバル変数【maker】の宣言
グローバル変数【data】の宣言
jsonのデータを変数dataに格納
マーカーの追加処理

グローバル変数【maker】の宣言

テンプレート上からのマーカーの作成と同じく、グローバル変数【maeker】を宣言します。makerの中には空の配列を入れておきます。この中にはひとつひとつのマーカーのデータが入ります。
※関数initMapより前に記述

var marker = [];

グローバル変数【data】の宣言

テンプレート上からのマーカーの作成では、ここでマーカーデータを格納しましたが、jsonを使う場合には空の配列を入れて宣言をします。
あとでjsonのデータをここに格納します。

var data = [];

jsonのデータを変数dataに格納

ここでjQueryを使用するのでjQueryを別途読み込んでおきます。
【getJSON】を使いjsonファイルを読み込み、jsonのデータの数分for文で回し、宣言しておいた変数dataの中にdata.push()で格納しています。

$.getJSON("【アップロードしたjsonまでのURL】", function(json){
       for (var i = 0; i <= json.length-1; i++) {
            data.push(
                {
                    'name': json[i].name,
                    'lat': json[i].lat,
                    'lng': json[i].lng
                }
            );
       };
});

jsonファイルの中身（例）

[
    {
        "name": "名古屋駅",
        "lat": 35.170897,
        "lng": 136.881558 
    }, {
        "name": "大名古屋ビルヂング",
        "lat": 35.172311,
        "lng": 136.884568
    }, {
        "name": "国際センター駅",
        "lat": 35.172038, 
        "lng": 136.887701
    }
]

数値以外はクオーテーションで囲うことが必須です。

マーカーの追加処理

for (var i = 0; i < data.length; i++) {
     markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 
       　marker[i] = new google.maps.Marker({ 
           position: markerLatLng, 
           map: map 
     });
}

マーカーの追加処理自体はテンプレート上からマーカーを立てる際の処理と一緒ですが、記述する場所は

$.getJSON("【アップロードしたjsonまでのURL】", function(json){
});

の中です。

position

positionは必須で、lat（緯度）,lng（経度）を指定してマーカーの初期位置を指定します。

map

まとめの全体のソース【json使用】

jsonファイルを使用したマーカーの立て方のデモはこちら。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Google maps API</title>
    <style type="text/css">
      html,body,#map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="mapscript.js"></script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
    </script>
  </body>
</html>

var map;
var marker = [];
var data = [];
|
function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.170981, lng: 136.881556} ,
        zoom: 15
    });

	$.getJSON("【jsonファイルをアップロードしたURL】", function(json){
        for (var i = 0; i <= json.length-1; i++) {
            data.push(
                {
                    'name': json[i].name,
                    'lat': json[i].lat,
                    'lng': json[i].lng
                }
            );
        };
 
        for (var i = 0; i < data.length; i++) {
            markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 
            marker[i] = new google.maps.Marker({ 
                position: markerLatLng, 
                map: map 
            });
        }

    });//jsonの閉じ
 
}

jsonファイル

[
    {
        "name": "名古屋駅",
        "lat": 35.170897,
        "lng": 136.881558 
    }, {
        "name": "大名古屋ビルヂング",
        "lat": 35.172311,
        "lng": 136.884568
    }, {
        "name": "国際センター駅",
        "lat": 35.172038, 
        "lng": 136.887701
    }
]

あとがき

最初にも書きましたが、jsonファイルを使う方がファイルがすっきりして個人的にはすきです。
jsonファイルから配列にいれるところに最初はとても苦戦していましたが、できて良かったなと思いつつ、もっと簡潔な書き方があるかもしれません。
こんな書き方しなくてもできるよ！と教えてくださる方お待ちしてます。
次はマーカーのクリック処理とか、ポップの表示くらいをまとめようかと思います。

API

この記事を読んだ方におすすめ

2地点間のルートの表示方法 - Google maps API -

吹き出しの情報ウィンドウをクリックで表示する - Google maps API -

mapを表示してみる - Google maps API -