Google Maps A.lat Is Not A Function.

This is my first time working with the javascript google maps api and I keep getting an this error when I try to LatLngBounds.extend() Uncaught TypeError: a.lat is not a function I

Solution 1:

You can't use a google.maps.LatLngLiteral in the google.maps.LatLngBounds.extend method, you have to convert it into a google.maps.LatLng object (at least for now).

code snippet:

var geocoder;
var map;
var data = [{
  Lat: -34.397,
  Lon: 150.644
}, {
  Lat: -34,
  Lon: 150
}];

functioninitialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var avLat = 0;
  var avLon = 0;
  var pathCoords = [];

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0, len = data.length; i < len; i++) {
    var myLatLng = new google.maps.LatLng(parseFloat(data[i].Lat), parseFloat(data[i].Lon));
    pathCoords.push(myLatLng);

    bounds.extend(myLatLng);
    avLat += parseFloat(data[i].Lat);
    avLon += parseFloat(data[i].Lon);
  }

  var path = new google.maps.Polyline({
    path: pathCoords,
    geodesic: true,
    strokeColor: '#0000FF',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  path.setMap(map);
  avLat = avLat / data.length;
  avLon = avLon / data.length;

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map"></div>