GMapsV3 - lots of MarkerImages slow down everything

[Kristóf Kótai]

Hi there,
I know this issue has been posted probably a couple of times, and the answer was always that we should use the clustering lib to avoid putting too many MarkerImages on the map.

But my question is something else: If I put 400 Markers (using the default, Google's marker image as an icon) then why is the map really fast? And if I use a custom icon, no matter how detailed, if it's transparent or not, it will be a 100 times slower.

http://www.viewranger.com/kristof/p1.html (Google's icon)
http://www.viewranger.com/kristof/p2.html (My icon)

I tried to optimise the custom icon as best as I could, but when I found out that even using a 5x5 pixel big icon (non-transparent, only #ffffff colored pixels) and the map is still unbelievably slow, I started windering what kind of magic icon does google use? Why can't I create such a good, optimised icon?

Is it even possible to create an optimised icon? Or is Google cheating in someway?

[Ben Appleton]

Your code triggers the older DOM markers as it specifies a scale:
    icon: new google.maps.MarkerImage(
        'http://viewranger.com/buddybeacon/v2/images/markers/marker_FF0000.png',
        new google.maps.Size(15,20), // original size
        new google.maps.Point(0,0), // origin
        new google.maps.Point(8,20), // anchor
        new google.maps.Size(15,20) // scaled size
    )

instead if you pass

    icon: 'http://viewranger.com/buddybeacon/v2/images/markers/marker_FF0000.png'

you'll get the faster Canvas markers.

- Ben

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/9fmhHrHRU5UJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Martin™]

Hi.

Are you implying that canvas markers will only be used if a
MarkerImage is constructed with a string URL only?
And that using the 'full' MarkerImage constructor with all properties
set will cause non-optimised markers?

Or could the scaled size be passed as null to acheive optimised canvas
markers?

Martin.

On Oct 14, 12:37 am, Ben Appleton <apple...@google.com> wrote:
> Your code triggers the older DOM markers as it specifies a scale:
>     icon: new google.maps.MarkerImage(
>         'http://viewranger.com/buddybeacon/v2/images/markers/marker_FF0000.png',
>         new google.maps.Size(15,20), // original size
>         new google.maps.Point(0,0), // origin
>         new google.maps.Point(8,20), // anchor
>         new google.maps.Size(15,20) // scaled size
>     )
> instead if you pass
>     icon: 'http://viewranger.com/buddybeacon/v2/images/markers/marker_FF0000.png'
> you'll get the faster Canvas markers.
>
> - Ben
>

> On Thu, Oct 13, 2011 at 7:39 AM, Kristóf Kótai <kotai.kris...@gmail.com>wrote:
>
>
>
>
>
>
>
> > Hi there,
> > I know this issue has been posted probably a couple of times, and the
> > answer was always that we should use the clustering lib to avoid putting too
> > many MarkerImages on the map.
>
> > But my question is something else: If I put 400 Markers (using the default,
> > Google's marker image as an icon) then why is the map really fast? And if I
> > use a custom icon, no matter how detailed, if it's transparent or not, it
> > will be a 100 times slower.
>
> >http://www.viewranger.com/kristof/p1.html(Google's icon)

> >http://www.viewranger.com/kristof/p2.html(My icon)

[Ben Appleton]

No, rather the marker scaling triggers the slower DOM markers.

Android brevity

[Kristóf Kótai]

This is unbelievable...
I removed the scaling (which doesn't even happen because the original
size is the same as the new size):

http://www.viewranger.com/kristof/p3.html

And it is really fast...
This should definitely be mentioned in the documentation! This would
help many people a lot!

Thanks, Kristof

On Oct 14, 12:37 am, Ben Appleton <apple...@google.com> wrote:

> Your code triggers the older DOM markers as it specifies a scale:
>     icon: new google.maps.MarkerImage(
>         'http://viewranger.com/buddybeacon/v2/images/markers/marker_FF0000.png',
>         new google.maps.Size(15,20), // original size
>         new google.maps.Point(0,0), // origin
>         new google.maps.Point(8,20), // anchor
>         new google.maps.Size(15,20) // scaled size
>     )
> instead if you pass
>     icon: 'http://viewranger.com/buddybeacon/v2/images/markers/marker_FF0000.png'
> you'll get the faster Canvas markers.
>
> - Ben
>

> On Thu, Oct 13, 2011 at 7:39 AM, Kristóf Kótai <kotai.kris...@gmail.com>wrote:
>
>
>
>
>
>
>
> > Hi there,
> > I know this issue has been posted probably a couple of times, and the
> > answer was always that we should use the clustering lib to avoid putting too
> > many MarkerImages on the map.
>
> > But my question is something else: If I put 400 Markers (using the default,
> > Google's marker image as an icon) then why is the map really fast? And if I
> > use a custom icon, no matter how detailed, if it's transparent or not, it
> > will be a 100 times slower.
>

> >http://www.viewranger.com/kristof/p1.html(Google's icon)
> >http://www.viewranger.com/kristof/p2.html(My icon)

[Martin™]

I agree.

I tend to use the full MarkerImage constructor and have been
specifying a scaled size equal to the original icon size.
This means i've unknowingingly been disabling any canvas optimisations
for my maps!

Defintely worth a mention in the documentation i say.

Can Ben confirm that passing null as the scaled size property won't
cause un-optimalised markers?
I have a marker manager script that needs to get each icon's size and
anchor point so my code needs to icon size and anchor in the
MarkerImage constructor.

Passing null as scaled size but passing icon size and icon anchor
point will give me canvas optimised markers will it?

Thanks a lot.

Martin.

[geoco...@gmail.com]

On Oct 14, 1:12 am, Martin™ <warwo...@gmail.com> wrote:
> I agree.
>
> I tend to use the full MarkerImage constructor and have been
> specifying a scaled size equal to the original icon size.
> This means i've unknowingingly been disabling any canvas optimisations
> for my maps!
>
> Defintely worth a mention in the documentation i say.
>
> Can Ben confirm that passing null as the scaled size property won't
> cause un-optimalised markers?

Beware of this issue:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/e0bb97bfeaae5957#

-- Larry

[Martin™]

I've replaced scaled size with null in my MarkerImage constructor and
am now seeing canvas elements (using Firebug) instead of img elements.

Marker click events all working fine too - touch wood.

The map definitely seems smoother to pan and zoom.

Martin.


On Oct 14, 3:02 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Oct 14, 1:12 am, Martin™ <warwo...@gmail.com> wrote:
>
> > I agree.
>
> > I tend to use the full MarkerImage constructor and have been
> > specifying a scaled size equal to the original icon size.
> > This means i've unknowingingly been disabling any canvas optimisations
> > for my maps!
>
> > Defintely worth a mention in the documentation i say.
>
> > Can Ben confirm that passing null as the scaled size property won't
> > cause un-optimalised markers?
>

> Beware of this issue:http://groups.google.com/group/google-maps-js-api-v3/browse_frm/threa...

[Ben Appleton]

That's right - the map pans much faster because the browser has already composited the marker icons into the canvas element. Events work as expected because we perform hit detection manually in javascript.

- Ben

Android brevity