Comparing lat/long values in Google Maps V3 - google-maps

Question

I have a map with a number of markers on it. Because of the way it is set up, one marker will always coincide with the centre of the map. I want to show a different icon on that marker to all the others.
The markers and their corresponding info box are defined with this function:
function createMarker(latlng, html, summary, photo1, photo2, thisLatlng) {
var contentString = "<div style='min-height:150px'>" + photo1 + "<img src='/images/" + photo2 + "' width='225' height='150' align='left' style='margin-right:8px;border:none'></a><span class='title'>" + html +"</span><br>" + summary + "</div>";
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: thisicon,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'mouseover', function() {
ib.close(map, marker);
boxText.innerHTML = contentString;
ib.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, marker);
});
gmarkers.push(marker);
}
"latlng" is the a lat/long that is different for each marker. "thisLatlng" is the centre of the map and the lat/long of one specific marker.
My intention was to use something like this to determine the correct icon to use:
if(latlng===thisLatlng){
var thisicon = icon1;
}else{
var thisicon = icon2;
}
However it's not working as the "if" always returns false. I've tried
if(latlng===thisLatlng){
and
if(latlng==thisLatlng){
and I've also tried turning it the other way around with != and !== but they always return false.
I've checked that the two values are equal by printing them one above the other and they look exactly the same (as they should be).
I must be doing something wrong, but what?

Answer 1

The LatLng class has an equals method.
equals
equals(other)
Parameters:
other: LatLng
Return Value: boolean
Comparison function.
The other option is to compute the difference between the two points and set a threshold (say 1 meter) for "equals"
That said, your existing code (with === works for me): fiddle as does .equals (fiddle)
code snippet:
var map;
var gmarkers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 19.12170,
lng: 72.85083
},
zoom: 13.5,
mapTypeId: 'terrain'
});
createMarker(map.getCenter(), "center", "summary", "", "", map.getCenter());
var otherPt = new google.maps.LatLng(19.12, 72.851);
createMarker(otherPt, "not center", "summary2", "", "", map.getCenter());
}
function createMarker(latlng, html, summary, photo1, photo2, thisLatlng) {
var contentString = "<div style='min-height:150px'>" + photo1 + "<img src='/images/" + photo2 + "' width='225' height='150' align='left' style='margin-right:8px;border:none'></a><span class='title'>" + html + "</span><br>" + summary + "</div>";
if (latlng.equals(thisLatlng)) {
var thisicon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
} else {
var thisicon = "http://maps.google.com/mapfiles/ms/micons/green.png";
}
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: thisicon,
});
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>