Googleマップクラスタマーカーの配列形式

Question

私は配列からクラスタとマーカーを持つ単純なマップを持っています。マーカーは、{lat：36.4381369、lng：-93.0502099}の形式で位置配列から設定されます。他のマップから追加する座標はたくさんありますが、フォーマットは次のとおりです：（36.4381369、-93.0502099） 変換が必要です何とか最初のフォーマットを2番目のフォーマットに変換します。 LatLng（36.4381369、-93.0502099）と他の組み合わせを試しましたが、マーカー/クラスタが地図に表示されません。

これは動作しますが、lat：lang：を付けないようにlocations配列を各番号の前に付ける必要があります。

function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      //center: {lat: -41.850033, lng: -87.6500523} 
     }); 
     map.setCenter(new google.maps.LatLng(35.850033, -98.6500523)); 

     // Create an array of alphabetical characters used to label the markers. 
     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {zoomOnClick: false, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [ 
     {lat: 36.4381369,lng: -93.0502099}, 
     {lat: 36.2259742,lng: -92.6828437} 
     ] 

これは機能しません。

var markers = locations.map(function(location, i) { 
     var point = location.maps.LatLng(location); 
      return new google.maps.Marker({ 
      //position: new google.maps.LatLng(locations), 
      //position: point, 
      position: location, 
      label: labels[i % labels.length] 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {zoomOnClick: false, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [ 
     (36.4381369,-93.0502099), 
     (36.2259742,-92.6828437) 
     ] 

Answer 1

有効なネストされたjavascript配列に場所を変更した場合は、マーカーを作成するためにそれを使用するようにコードを変更することができます。

var locations = [ 
    [36.4381369,-93.0502099], 
    [36.2259742,-92.6828437] 
]; 

次に、このようなあなたのマーカーを作成します：

var markers = locations.map(function(location, i) { 
    var pt = {lat: location[0], lng: location[1]}; 
    return new google.maps.Marker({ 
    position: pt, 
    label: labels[i % labels.length] 
    }); 
}); 

を

proof of concept fiddle

コードスニペット：

function initMap() { 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    //center: {lat: -41.850033, lng: -87.6500523} 
 
    }); 
 
    map.setCenter(new google.maps.LatLng(35.850033, -98.6500523)); 
 

 
    // Create an array of alphabetical characters used to label the markers. 
 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
 

 
    // Add some markers to the map. 
 
    // Note: The code uses the JavaScript Array.prototype.map() method to 
 
    // create an array of markers based on a given "locations" array. 
 
    // The map() method here has nothing to do with the Google Maps API. 
 
    var markers = locations.map(function(location, i) { 
 
    var pt = { 
 
     lat: location[0], 
 
     lng: location[1] 
 
    }; 
 
    return new google.maps.Marker({ 
 
     position: pt, 
 
     label: labels[i % labels.length] 
 
    }); 
 
    }); 
 

 
    // Add a marker clusterer to manage the markers. 
 
    var markerCluster = new MarkerClusterer(map, markers, { 
 
    zoomOnClick: false, 
 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' 
 
    }); 
 
} 
 
var locations = [ 
 
    [36.4381369, -93.0502099], 
 
    [36.2259742, -92.6828437] 
 
] 
 
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> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/99a385c1/markerclustererplus/src/markerclusterer.js"></script> 
 
<div id="map"></div>