トグル可能なレイヤーとしてデータベースからマーカーをロード

Question

データベースからマーカをレイヤーとしてGoogleマップにロードしようとしています。私はすでにKMLレイヤーをロードしていますが、ユーザーが自分のカスタムマーカーを保存してデータベースにロードできるようにしたいと考えています。

私のデータベース構造は次のようになります。各ユーザーが独自のカスタム・ポイントを持つことになりますので

| ID | TITLE | LAT | LON | 

、私は、ユーザーのポイントを取得し、他のデフォルトの層に加えて、マップ上の層としてそれらをロードしたいです（KML）。私はデータレイヤーを作成するのが最善のアプローチであり、geoJSONを使用しても私のデータベースから作成する方法はまだ分かりません。

今のところ、トグル可能なレイヤーとして実際に追加できるかどうかを確認するためにジェネリックjsonファイルを使用していますが、それは正しくできません。それがうまくいくと、データベースから結果を取得し、geoJSONでフォーマットしてマップに追加する方法を理解できます。

これは私がトグル層としてJSONデータを取得することを試みたが、それは動作しませんどのようにある：

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -49.7770641, lng: 55.6602758}, 
    zoom: 6, 
    mapTypeControlOptions: { 
     position: google.maps.ControlPosition.RIGHT_TOP 
     }, 

    }); 

    layers[0] = new google.maps.KmlLayer('http://www.example.com/kmllayer1.kml', {preserveViewport: true, suppressInfoWindows: false, zIndex: 1}); 
    layers[1] = new google.maps.KmlLayer('http://www.example.com/kmllayer2.kml', {preserveViewport: true, zIndex: 2, suppressInfoWindows: true}); 
    layers[2] = map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json'); 
    for (var i = 0; i < layers.length; i++) { 
     layers[i].setMap(map); 
     } 
} 
function toggleLayer(i) { 
     if(layers[i].getMap() === null) { 
     layers[i].setMap(map); 
     } 
     else { 
     layers[i].setMap(null); 
     } 
    } 

Answer 1

データ層はKmlLayer異なる、.loadGeoJson方法はData.Featureオブジェクトの配列を返します。 。 the documentationから：

addGeoJson（にGeoJSON：オブジェクト、オプション：？Data.GeoJsonOptions）

戻り値：Array<Data.Feature>

追加にGeoJSONコレクションに備わっています。このメソッドに解析されたJSONを与えます。インポートされたフィーチャが返されます。 GeoJSONをインポートできなかった場合は例外をスローします。

（1つだけであることに注意）は、このような層のあなたの配列にそれを追加します。

layers[2] = map.data; 
layers[2].loadGeoJson(GEOJSON_URL); 

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 
var layers = []; 
 

 
function toggleLayer(i) { 
 
    if (layers[i].getMap() === null) { 
 
    layers[i].setMap(map); 
 
    } else { 
 
    layers[i].setMap(null); 
 
    } 
 
} 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 43, 
 
     lng: -87 
 
    }, 
 
    zoom: 4, 
 
    mapTypeControlOptions: { 
 
     position: google.maps.ControlPosition.RIGHT_TOP 
 
    }, 
 

 
    }); 
 

 
    layers[0] = new google.maps.KmlLayer('http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml', { 
 
    preserveViewport: true, 
 
    suppressInfoWindows: false, 
 
    zIndex: 2 
 
    }); 
 
    layers[1] = new google.maps.KmlLayer('https://developers.google.com/kml/documentation/us_states.kml', { 
 
    preserveViewport: true, 
 
    zIndex: 1, 
 
    suppressInfoWindows: true 
 
    }); 
 
    layers[2] = map.data; 
 
    layers[2].loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson'); 
 
    for (var i = 0; i < layers.length; i++) { 
 
    layers[i].setMap(map); 
 
    } 
 
    var btns = document.getElementsByClassName("btn"); 
 
    for (var i = 0; i < btns.length; i++) { 
 
    google.maps.event.addDomListener(btns[i], 'click', (function(i) { 
 
     return function() { 
 
     toggleLayer(i); 
 
     } 
 
    })(i)); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input class="btn" id="btn0" type="button" value="0" /> 
 
<input class="btn" id="btn1" type="button" value="1" /> 
 
<input class="btn" id="btn2" type="button" value="2" /> 
 
<div id="map"></div>

を