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 in the object. In your example, this would mean testing for equality in latitude and longitude. — instanceofnull
– instanceofnull, Commented Mar 20, 2015 at 9:38

Greg Burghardt · Accepted Answer · 2015-03-20 12:27:22Z

2

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"

answered Mar 20, 2015 at 12:27

Greg Burghardt

19.2k10 gold badges58 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:28:33Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related