Google Maps Cluster markers array format

Question

I have simple map with clusters and markers from array. Markers are set from locations array in format of :{lat: 36.4381369,lng: -93.0502099}, I have a lot of coordinates to add from other map but they are in format of: (36.4381369,-93.0502099) I need to convert first format to second somehow. I tried LatLng(36.4381369,-93.0502099) and other combinations but markers/cluster does not show up on the map.

This works but need locations array to be without lat: lang: in front of each number.

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}
      ]

This does not work.

 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

If you change locations to a valid nested javascript array, you can modify your code to use it for creating markers:

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

Then create your markers like this:

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

code snippet:

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://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m'
    // '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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://cdn.rawgit.com/googlemaps/v3-utility-library/99a385c1/markerclustererplus/src/markerclusterer.js -->
<div id="map"></div>