Am getting error "w.getPosition is not a function" using google map API setMarkers function?

Question

Trying to offset markers if they are on top of each other in my array of markers. I cant seem to stop the error. I am using this answer as guidance:
https://stackoverflow.com/a/25615622/13249825

Array of marker GPS coordinates and other data coming out of an ajax request in database:

var markers = (response['markers']);

var markerArray = []; //Marker array I use to store Marker data so I can delete/add later.
function setMarkers(markers) {
var iconBase =
            '/local/';
var icons = {
         'Automotive Care': {
            image: iconBase + 'AC.png',  
          },
          Contractor: {
            image: iconBase + 'contractor.png',
          }
        };
var infowindow = new google.maps.InfoWindow();
    if (markers){
  for (let i = 0; i < markers.length; i++) {
    var w = markers[i];
    var pos = w.getPosition();
    var latLng = new google.maps.LatLng(parseFloat(w[1]),parseFloat(w[2])); 

    if (latLng.equals(pos)) {
    var a = 360.0 / markers.length;
    var newlat = pos.lat() + -.00004 * Math.cos((+a*i) / 180 * Math.PI);  //x
    var newlng = pos.lng() + -.00004 * Math.sin((+a*i) / 180 * Math.PI);  //Y
    var latLng = new google.maps.LatLng(newLat,newLng);    
}
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: {url: icons[w[4]].image,
            scaledSize: new google.maps.Size(32, 32)},
      title: w[0],
      zIndex: parseFloat(w[3])
    });
      markerArray.push(marker);
}        
}    
}

Markers Array

(4) [Array(9), Array(9), Array(9), Array(9)]
0: (9) ["aawefwaef", "43.033320", "-76.053556", "3", "Automotive Care", "234", "Anytime", "Anytime", 163]
1: (9) ["sdfg", "43.028406", "-76.000523", "3", "Pet Care", "345", "Anytime", "Anytime", 159]
2: (9) ["asd", "43.028406", "-76.000523", "3", "Contractor", "111", "Anytime", "Anytime", 151]
3: (9) ["qwe", "43.028406", "-76.000523", "3", "Automotive Care", "123", "Anytime", "Anytime", 150]
length: 4

1) Please change `for (i = 0` to `for (let i = 0` because otherwise you are creating a global variable by accident. 2) Please show the place where you fill your markers into `markers`, and ideally also show the contents of `markers` at the time of your error, in the console. — CherryDT, Apr 18 '20 at 21:07
Because right now it looks as if the `markers` array contains _something_ but not actual marker objects. — CherryDT, Apr 18 '20 at 21:08
You are pushing into `markerArray` (which I see nowhere defined), not `markers` (which I see nowhere used _nor_ defined). Again, please show where you use `markers` (not `markerArray`) and log its contents at the point of the error to your console as well. — CherryDT, Apr 18 '20 at 21:25
Or maybe the solution for you is already to use `markerArray` instead of `markers` in your code... — CherryDT, Apr 18 '20 at 21:27
this code works 100% if i take out the `if (latLng.equals(pos)) {` and `var pos =` it only stops working when i try to see if GPS coordinates overlap. i just updated again. — Dimitri Bostrovich, Apr 18 '20 at 21:30
OK so `markers` comes from the arguments of `setMarkers`. Please, again, _log the contents of `markers` to the console at the point of the error and show it_! For example, add `console.log(markers)` before the line that fails. — CherryDT, Apr 18 '20 at 21:33
OK so you are trying to call `getPosition` on an array `["aawefwaef", "43.033320", "-76.053556", "3", "Automotive Care", "234", "Anytime", "Anytime", 163]`..? That doesn't make sense. Please mentally step though your code again and think about how `markers` and `markerArray` should be used, because I'm a bit confused about what you are trying to do there. It seems that `markers` just contains arrays with data from your API (not `Marker` objects!), while `markerArray` has the actual `Marker` objects you create (which _do_ have `getPosition`) - yet you create them _afterwards_, so I am confused. — CherryDT, Apr 18 '20 at 21:39
ok, basically, i query the database and get the `markers` array. When it comes to the `setMarkers` function, it loops through each position in the array to get the data, Z-index, Icon picture, title lat,lng etc. then after that(previously) it appended "markers" to "markerArray" at the end so I can keep track of all the markers. then if I needed to delete the markers, I can reflect to the `markerArray` I was hoping to loop through GPS coordinates as they come out so they dont get placed ontop of eachother then add them to the map, then append them to the `markerArray` at the end — Dimitri Bostrovich, Apr 18 '20 at 21:44
i know im going to have to switch some of my code around, but in the mean time, if i can just figure out how to compare the markers array and change their position on the map, ill be able to figure out the rest — Dimitri Bostrovich, Apr 18 '20 at 21:48

score 1 · Accepted Answer · answered Apr 19 '20 at 00:37

Here you go. Keep your markerArray, but just every time you want to add new icons. Just run them through the markerArray to see if there are any duplicate lat/lng.

var markerArray = []; //Marker array I use to store Marker data so I can delete/add later.
function setMarkers(markers) {
var iconBase =
            '/local/';
var icons = {
         'Automotive Care': {
            image: iconBase + 'AC.png',  
          },
          Contractor: {
            image: iconBase + 'contractor.png',
          }
        };
var infowindow = new google.maps.InfoWindow();
    if (markers){
  for (var i = 0; i < markers.length; i++) {
    var w = markers[i]; 
    var latLng = new google.maps.LatLng(parseFloat(w[1]),parseFloat(w[2])); 


if(markerArray.length != 0) {
    for (let i=0; i < markerArray.length; i++) {
        var existingMarker = markerArray[i];
        var pos = existingMarker.getPosition();
        if (latLng.equals(pos)) {
            var a = 360.0 / markerArray.length;
            var newLat = pos.lat() + -.00004 * Math.cos((+a*i) / 180 * Math.PI);  //x
            var newLng = pos.lng() + -.00004 * Math.sin((+a*i) / 180 * Math.PI);  //Y
            var latLng = new google.maps.LatLng(newLat,newLng);
        }
    }
}
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: {url: icons[w[4]].image,
            scaledSize: new google.maps.Size(32, 32)},
      title: w[0],
      zIndex: parseFloat(w[3])
    });
      markerArray.push(marker);
}        
}    
}

Am getting error "w.getPosition is not a function" using google map API setMarkers function?

1 Answers1