Marker Left Position getting set to > 4,000,000px;

51 views
Skip to first unread message

Cameron F

unread,
Sep 11, 2009, 2:17:45 PM9/11/09
to Google Maps JavaScript API v3
I know that I'm supposed to point people at working code, but right
now that is challenging due to the way we have our environment setup,
and this is a problem that is a little hard to reproduce. For now I'm
just asking if anyone has seen similar behaviours, or has any ideas on
how I should go to the next level of debugging.

The scenario. I draw a map with about 20 markers on it. I drag the
map, and catch the dragend event. This removes all of the current
markers, triggers an ajax call to the server to get new markers. The
data from the new markers all come down fine, and I then create all of
them. Unfortunately, none of them actually display on the screen. In
digging into it, I see the following html for the first couple of
markers (in div pane_3)

<div id="pane_3" style="z-index: 103; position: absolute; left: 0px;
top: 0px;">
<div style="overflow: hidden; height: 20px; background-image: url(/
images/icons/foodwater_unknown.png); background-position: 0px 0px;
background-repeat: no-repeat; position: absolute; left: 4194790px;
top: 387px; z-index: 387; width: 20px;"/>
<div style="overflow: hidden; width: 20px; height: 20px;
background-image: url(/images/icons/foodwater_unknown.png); background-
position: 0px 0px; background-repeat: no-repeat; position: absolute;
left: 4194860px; top: 384px; z-index: 384;"/>

Note the left: setting which has values for 4194790px and 4194860px.

OK, so now I know why they aren't appearing. So I dug around in
firebug, and examined the marker object after the following call:

proto = new google.maps.Marker({position: latLng,map: view,icon:
icon});

And noticed (via firebug) that the projectionController had some
really weird values:

proto.projectionController.pixelPosition = (4194790, 387) x=4194790
y=387

I poked around the parameters I was passing in to maps.Marker, and the
latLng is fine. I tried to poke around the view, but didn't see
anything obviously wrong.

Note that this entire code path works fine on the initial map load,
and if I mess around with the map - e.g. zoom it in or out, then
sometimes the problem goes away and everything works OK. I've reproed
this behaviour on iPhone Safari and Firefox on Mac, but Android
doesn't seem to exhibit it.

If no-one has any ideas I can try to create a simple repro on a public
server, but was hoping someone might give me some direction first.

Esa

unread,
Sep 11, 2009, 3:20:14 PM9/11/09
to Google Maps JavaScript API v3


On Sep 11, 9:17 pm, Cameron F <cam_goo...@ferroni.net> wrote:

> If no-one has any ideas I can try to create a simple repro on a public
> server, but was hoping someone might give me some direction first.

Please do. Very interesting.

Cameron F

unread,
Sep 11, 2009, 6:21:45 PM9/11/09
to Google Maps JavaScript API v3
OK, not sure if this will help or not, but here is a repro:

Using Firefox on the Mac:
go to http://demo.emicus.com
auth user/pass - googlegroups/phu3Rafu

from there, if you just drag the map a little, you can see the
behaviour I described above.

If you want to look at where the marker is being created, check out
location_marker.js line 6

-Cam

Esa

unread,
Sep 11, 2009, 6:47:11 PM9/11/09
to Google Maps JavaScript API v3
I managed to sign in but I don't see a map.

Esa

unread,
Sep 12, 2009, 8:13:46 AM9/12/09
to Google Maps JavaScript API v3

I got in, thanks.

I was not able to reproduce the misbehavior with a Windows machine. It
works fine with FF3.5.3 in XP. Also with Chrome. Not even an idea what
is wrong. Everything looks good.

Try to get my hands on a Mac later.

Cameron F

unread,
Sep 12, 2009, 9:57:09 AM9/12/09
to Google Maps JavaScript API v3
Thx for looking into it. I'm also able to repro it on an iPhone,
although that doesn't make debugging very easy.

-Cam

Cameron F

unread,
Sep 12, 2009, 11:28:27 AM9/12/09
to Google Maps JavaScript API v3
OK, a little more information this morning. I'm actually seeing it
happen before it even gets back into my code. Here's the repro:

1. Clear any cookies related to demo.emicus.com (just to make sure
everything is coming from a fresh place).
2. Load the map at http://demo.emicus.com/maps and wait for the
markers to appear.
3. Set a breakpoint in map_updater.js, line 20 - this is the line
where I clear the old markers before I hit the server for new markers.
4. Start dragging the map around - you will notice that the markers
will disappear on their own while you are dragging the map
5. When you stop dragging the map, it will hit the breakpoint
6. Go inspect the divs in firebug, and you will see that the markers
in pane 3 now have their left px set to 2097860px etc.

-Cam

pamela (Google Employee)

unread,
Sep 20, 2009, 10:33:46 AM9/20/09
to google-map...@googlegroups.com
Hi Cameron-

Your map is now password-protected, but per other threads, I am
supposing your issue is passing strings into the LatLng constructor
instead of floats. If that doesn't fix the issue, please post a
non-password-protected link. Thanks!

- pamela
Reply all
Reply to author
Forward
0 new messages