Google map error - a.lng is not a function

I'm planning to use google map "containsLocation()" API in one of my application. The doc link is - https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

I'm following the same example. Here is my code.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon arrays</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // This example requires the Geometry library. Include the libraries=geometry
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          //center: {lat: 24.886, lng: -70.269},
          center: {lat: 12.9629277, lng: 77.7178972},
          zoom: 30,
        });

        /*var triangleCoords = [
          {lat: 25.774, lng: -80.19},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757}
        ];*/

        var triangleCoords = [
          {lat: 12.96301273, lng: 77.71785952},
          {lat: 12.96314857, lng: 77.71784072},
          {lat: 12.96316124, lng: 77.71784037},
          {lat: 12.96295465, lng: 77.71788993},
          {lat: 12.96293329, lng: 77.7179345},
        ];

        var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});

        google.maps.event.addListener(map, 'click', function(e) {

          var curPosition = {"lat":12.9629277,"lng":77.7178972};
          //var curPosition = e.latLng;

          console.log("e content : "+JSON.stringify(e.latLng));
          console.log("curPosition content : "+JSON.stringify(curPosition));

          var resultColor =
              google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
              'red' :
              'green';

          new google.maps.Marker({
            position: curPosition,
            map: map,
            icon: {
              path: google.maps.SymbolPath.CIRCLE,
              fillColor: resultColor,
              fillOpacity: .2,
              strokeColor: 'white',
              strokeWeight: .5,
              scale: 10
            }
          });


        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiAur6ANJsV776iVmMDJcHYjQkXrXyu8s&libraries=geometry&callback=initMap"
         async defer></script>
  </body>
</html>

If you see I've created a curPosition variable which holds the latLng data. My problem at here is as long as var curPosition = e.latLng; it works fine but, the moment I changed that to var curPosition = {"lat":12.9629277,"lng":77.7178972}; it's started showing error "Uncaught TypeError: a.lng is not a function".

Can't able to understand why it's happening? Any clue...?

Console.log screen shot attached

Regards

Solution

the containsLocation method requires a google.maps.LatLng as the "point" (at least at present), you can't use a google.maps.LatLngLiteral for currentLocation.

from the documentation:

containsLocation(point:LatLng, polygon:Polygon) | Return Value: boolean

Computes whether the given point lies inside the specified polygon.

 var curPosition = new google.maps.LatLng(12.9629277,77.7178972);

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 12.9629277,
      lng: 77.7178972
    },
    zoom: 30,
  });

  var triangleCoords = [
     {lat: 12.96301273,lng: 77.71785952}, {lat: 12.96314857, lng: 77.71784072}, {lat: 12.96316124, lng: 77.71784037}, {lat: 12.96293329, lng: 77.7179345}, {lat: 12.96295465, lng: 77.71788993}];
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    map: map
  });

  var curPosition = new google.maps.LatLng(12.9629277, 77.7178972);
  console.log("curPosition content : " + JSON.stringify(curPosition));

  var resultColor =
    google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
    'red' :
    'green';

  new google.maps.Marker({
    position: curPosition,
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: resultColor,
      fillOpacity: .2,
      strokeColor: 'white',
      strokeWeight: .5,
      scale: 10
    }
  });
  var curPositionB = new google.maps.LatLng(12.963, 77.71788993);
  var resultColorB = google.maps.geometry.poly.containsLocation(curPositionB, bermudaTriangle) ?
    'red' :
    'green';

  new google.maps.Marker({
    position: curPositionB,
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: resultColorB,
      fillOpacity: .2,
      strokeColor: 'white',
      strokeWeight: .5,
      scale: 10
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>