Google Maps Javascript API で 複数のgeojsonファイルを描画する

この記事は ちゅらデータアドベントカレンダーの23日目の記事 になります。

大大大遅刻してしまってすみません！年内に終わらせたい仕事があったんです（言い訳

TL;DR

mapsのレイヤーを分けて作成してそれぞれにaddGeoJSON関数を適用させましょう。

let map;
var area_layer1;
var area_layer2;

map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 26.27401341109744, lng: 127.72906195878593 },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

area_layer1 = new google.maps.Data({map: map});
area_layer2 = new google.maps.Data({map: map});

area_layer1.addGeoJson(JSON.parse(geojson_string));
area_layer2.addGeoJson(JSON.parse(geojson_string));

レイヤーごとにそれぞれ分ける理由

• addGeoJSONで読むことができるのは1つだけになってしまうため、1レイヤーに対して複数のgeojsonファイルを読み出すことができない
• 複数のgeojsonレイヤーにたいしてzIndexを用いた優先順位を付ける必要がある場合に、それぞれレイヤーごとに変数定義することで可能になる
• geojsonレイヤーの管理（map上への表示・削除)が簡単になる