Bug: “Uncaught TypeError: Cannot read property 'x' of undefined” only in Android/iOs browsers [35824357]

Fixed

Bug

Status Update

No update yet.

Description

aa...@gmail.com

created issue #1

Feb 1, 2014 12:02AM

Hi,

I'm getting the below error most of the times on every attempt to drag the map, after displaying a dynamically constructed polygon.

Error : "Uncaught TypeError: Cannot read property 'x' of undefined" 

To replicate my problem :
1. Disable the map's draggable attribute
2. Allow user to trace a shape on the map, use the coordinates to dynamically construct and show a polyline.
3. When the tracing is done, construct a polygon using the path set to the above polyline and remove the polyline
4. Enable the map's draggable attribute
5. Now try to drag the map
Error/Consequence : The above mentioned error is displayed on the browser console several times. The map is not draggable.

jsFiddle : <a rel="nofollow" href="

http://jsfiddle.net/tzpXQ/14/">

http://jsfiddle.net/tzpXQ/14/</a>
(If using this jsFiddle, click on "Start Drawing" and trace on the map to display the polyline followed by the polygon. Now try to drag the map)

On Android browser, the error points to line# 180 of my html file (irrespective of the html file length) (but I cant check what that line is)
On the iPad emulation of Chrome on desktop, the error points to the below line of a google maps API js file (whose name changes on every page load). The error line is :

<code>g("center");H.bh=cg("center");H.Gf=bg("latLngCenter");H.ph=bg("projectionBounds");H.Df=bg("projection");H.getLatLngBounds=md("k");H.Hm=bg("fixedPoint");function lx(a,b){this.min=a;this.max=b}function mx(a,b){return b<a.min?a.min:b>a.max?a.max:b};function nx(a){this.d=a}L(nx,P);nx[F].immutable_changed=function(){var a=this,b=a.get("immutable"),c=a.b;b!=c&&(Id(a.d,function(d){(c&&c[d])!==(b&&b[d])&&a.set(d,b&&b[d])}),a.b=b)};function ox(a,b,c){Bn(this,a);this.b=b;

this.ca=c}function px(a,b,c){this.x=a||0;this.y=b||0;this.b=c||1}px[F].transform=function(a,b,c){var d=c.b/b.b;this.b=a.b*d;this.x=a.x*d+(c.x-b.x*d);this.y=a.y*d+(c.y-b.y*d)};function qx(a,b){a.x-=(1-a.b)*b.x;a.y-=(1-a.b)*b.y}function rx(a,b){a.b=b.b;a.x=b.x;a.y=b.y}px[F].set=function(a,b,c){this.b=c;this.x=a;this.y=b};Na(px[F],function(){this.b=1;this.y=this.x=0});Aa(px[F],function(){return"("+this.x+","+this.y+","+this.b+")"});</code>

Browser & OS used:
1) Android browser on Android phone/tablet
2) iPad emulation of Chrome browser on desktop (closest I could get to an iPad+Mac combination)

API version :
Latest google maps API version (3.exp)

Temporary fix :
Introducing a delay of 1500ms before performing step #4 above is helping eliminate the map freezing and the error in the console, but makes the appln feel slower than it truly is.

Thanks in advance.

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Comments

aa...@gmail.com <aa...@gmail.com> #2Feb 1, 2014 12:12AM

Can you track these events by assigning event listeners on the map container? For
example:

google.maps.event.addDomListener('map_canvas', 'mousemove', function(e) {
// code here
});

Granted, it'll take a bit more code on your end to determine whether the mouse is
within map container boundaries, but this seems like a feature you can add yourself.

ka...@gmail.com <ka...@gmail.com> #3Feb 7, 2015 08:50PM

I have tried but my event handlers conflict with yours. The pixel arithmetic is
messy. It requires an additional OverlayView for the "fromPixelToLatLon" conversion.
You already have the same information for "click" & "dblclick" event handlers.

The browsers measure pixel offsets differently. Internet Explorer measures pixel
offsets relative to the parent DIV. Firefox measures pixel offsets relative to the
DIV containing the corresponding tile. An extra DIV is required in order to simplify
the Firefox arithmetic. Unfortunately, it covers your click layer which causes it to
fail.

[Deleted User] <[Deleted User]> #4May 7, 2015 01:50PM

OK, we'll consider it.

Thanks!

de...@gmail.com <de...@gmail.com> #5May 27, 2015 10:07PM

The pixel arithmetic is not trivial. Browser differences must be accommodated.

Look at:

http://www.polyarc.us/polycluster/event.html

It is a lot of work just to track mouse coordinates. It is incompatable with your
event listeners.

de...@gmail.com <de...@gmail.com> #6May 27, 2015 10:18PM

Please include the following Events in the v3 API that were present in v2

- loaded
- moveend

en...@google.com <en...@google.com> #7May 28, 2015 01:12AM

Accepted by zw...@google.com.

@5

Have you tried using the 'idle' event? This should replicate the events you named.

cs...@google.com <cs...@google.com> #8Jun 19, 2015 05:45AM

Marked as fixed.

Berry, I starred this request; I also implemented an event handler that seems not to
have some of the issues you listed in your post:

http://notebook.kulchenko.com/maps/gridmove. The pixel arithmetic is still not
trivial, but it seems like you and I would still need to do our own calculations as
it's unlikely that the API will report pixel coordinates we both need to support
canvas tiles.

Paul (

http://notebook.kulchenko.com/maps/)

cs...@google.com <cs...@google.com> #9Jun 26, 2015 01:19AM

Hi Paul,

Both you & I are doing way too much work for what was trivial with the old API. I
will be happy with a browser independent way to obtain "mousemove" Lat/Lon
coordinates without adding an OverlayView. Conversion back to pixels is easy. I am
trying to avoid extracting information directly from the DOM which might change.

Berry

[Deleted User] <[Deleted User]> #10Mar 23, 2016 07:40PM

Berry, I agree; this would be sufficient and would simplify the code.

Paul.