How to compare a LatLng object with another one which is in an array?

Question

I'm a beginner in JavaScript. Recently I'm trying to develop associative applications in Google Map. But I bump into a strange problem.

Please refer to the code below.

<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>

<body>
<script>

var buf = []; 
var pos1  = new google.maps.LatLng(1, 2); buf.push(pos1); 
var pos2  = new google.maps.LatLng(3, 4); buf.push(pos2); 
var pos3  = new google.maps.LatLng(5, 6); buf.push(pos3); 

//initialize a new object here
var pos4  = new google.maps.LatLng(3, 4);

if ( buf.indexOf(pos4) != -1 ) 
    document.write("yes");
else
    document.write("no");

</script>
<body>
</html>

Because value of pos4 is same to pos2, the printed result should be "yes" if the position does exist in the array. However it printed "no" on the screen.

I 've tried to print out the values from pos4 and pos2. I found that both are the same and I have no idea why this check failed. Is there any solution to solve the problem?

Two different objects will fail equality test even if they hold the same data. For example `var a = {test: 1}, b = {test: 1}; alert(a == b);` will result in `false`. You need to test the equality of the [primitive data](https://msdn.microsoft.com/en-us/library/ie/7wkd9z69%28v=vs.94%29.aspx) in the object. In your example, this would mean testing for equality in latitude and longitude. — instanceofnull, Mar 20 '15 at 09:38

score 2 · Answer 1 · answered Mar 20 '15 at 12:27

According to the Google Maps API V3 docs, all LatLng objects have an equals method you can use to compare two different LatLng objects:

var p1 = new google.maps.LatLng(3, 10),
    p2 = new google.maps.LatLng(3, 10);

console.log(p1.equals(p2)); // logs "true"

score 0 · Answer 2 · edited May 23 '17 at 12:28

The default indexOf don't work in objects comparison because 2 objects are never equal (they are only if the have the same reference), as pointed out here.

You can create your indexOf function, based on this post. And compare the lat() and lng(), function results, from objects.

buf.indexOf = function indexOf(elem){
  index = -1;
  for(var i = 0, len = buf.length; i < len; i++) {
    if (this[i].lat() === elem.lat() 
        && this[i].lng() === elem.lng() ) {
      index = i;
      break;
    }
  }
  return index;
}

Note: As @greg-burghardt sugested you can replace this[i].lat() === elem.lat() && this[i].lng() === elem.lng() with this[i].equals(elem).

Usage:

var buf = []; 
buf.indexOf = function indexOf(elem){
  index = -1;
  for(var i = 0, len = buf.length; i < len; i++) {
    if (this[i].lat() === elem.lat() 
        && this[i].lng() === elem.lng() ) {
      index = i;
      break;
    }
  }
  return index;
}

var pos1  = new google.maps.LatLng(1, 2); buf.push(pos1); 
var pos2  = new google.maps.LatLng(3, 4); buf.push(pos2); 
var pos3  = new google.maps.LatLng(5, 6); buf.push(pos3); 

//initialize a new object here
var pos4  = new google.maps.LatLng(3, 4);
var status = "";
if ( buf.indexOf(pos4) != -1 ) 
  status += 'yes - ' + pos4 + '- index ' +  buf.indexOf(pos4);
else
  status += "no";

var pos5  = new google.maps.LatLng(1, 4);
status += '<br />';
if ( buf.indexOf(pos5) != -1 ) 
  status += 'yes - ' + pos5 + '- index ' +  buf.indexOf(pos4);
else
  status += 'no - ' + pos5;  
  
document.getElementById('status').innerHTML = status;

<head>
  <script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
  <div id="status"></div>
<body>

How to compare a LatLng object with another one which is in an array?

2 Answers2