Uncaught TypeError: Cannot read property 'x' of undefined common.js

Question

I am using google map api v3 and got this error while using the

map.fitBounds(bounds); function

Here is the error snapshot on console

And Here is the Code:

var arr = [{lat: -25.363, lng: 131.044}, {lat: 12.97, lng: 77.59}];
for (i = 0; i < arr.length; i++) {
    bounds.extend(new google.maps.LatLng(arr[i]));
}
map.fitBounds(bounds); //If I comment this line in m code, the error is gone but map does not load.

what is the problem? Also how can I solve it?

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. Where do you create the `map`? Where do you create the `bounds`? — geocodezip, Feb 10 '16 at 14:24
I had the exact error description, line and uglified method names. And it was because I declared in a script a `var self` that went into `window`. Maps API checks `window.self` and breaks. Just rename that var. And if that's your case too, it will prove the need to provide MCTR examples. — dmcontador, May 13 '16 at 17:16
Possible duplicate of [Detecting an undefined object property](https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) — Liam, Nov 20 '18 at 12:04

score 10 · Answer 1 · answered Aug 18 '16 at 14:28

My guess is that somewhere in your code you have a self = this without a var declaration in front of it.

When you forget the var you are creating a global variable -- or in this case, redefining the global self as your local function. This will cause a hiccup in the Google Maps code which expects self to be Window and lead to the Uncaught TypeError: Cannot read property 'x' of undefined(…)

This kind of error is why some developers prefer to use that or some other term rather than self for scope control . If you are a super careful coder and never forget your var declarations you'll be fine. But for those humans among us who occasionally mess up, using that can save hours of frustrating debugging.*

* Those super careful coders would say that we deserve the hours of frustrating debugging because we are careless :)

In my case the transpiler was doing that `self = this` for me (using ecma6). This answer really saved my day, thanks. — Daniele, Nov 30 '16 at 14:00
if you are confuse about who is that "self" just put a breackpoint in the error and type "self" in the chrome console. — Nathan Redblur, Dec 20 '16 at 16:59

score 0 · Answer 2 · answered Feb 10 '16 at 18:53

The google.maps.LatLngBounds.extend method does not take google.maps.LatLngLiteral objects as arguments (yet).

extend(point:LatLng) | Return Value: LatLngBounds

Extends this bounds to contain the given point.

Translate them into google.maps.LatLng objects.

var bounds = new google.maps.LatLngBounds();
var arr = [{lat: -25.363,lng: 131.044}, {lat: 12.97,lng: 77.59}];
for (i = 0; i < arr.length; i++) {
  bounds.extend(new google.maps.LatLng(arr[i].lat, arr[i].lng));
}
map.fitBounds(bounds);

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var arr = [{lat: -25.363,lng: 131.044}, {lat: 12.97,lng: 77.59}];
  for (i = 0; i < arr.length; i++) {
    var marker = new google.maps.Marker({
      position: arr[i],
      map: map
    });
    bounds.extend(new google.maps.LatLng(arr[i].lat, arr[i].lng));
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Thanks for the Fiddle. A perfect one but the solution is not working. — Gora, Feb 24 '16 at 05:19
You have the same error? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that exhibits the issue in your question. — geocodezip, Feb 24 '16 at 05:22
Yes, I have the same error. The Fiddle you provided is the perfect code I am using. Can you suggest what else can be the issue? — Gora, May 05 '16 at 11:37

Uncaught TypeError: Cannot read property 'x' of undefined common.js

2 Answers2