v3 Map Marker Size - image/icon is stretched in FF and Chrome - not IE8

[Michael Rex Schumacher]

Hello,

Using Google API v3

Both the default marker and custom marker sizes are getting inflated/stretched when my map displays in Firefox or Chrome, but strangely it works fine in IE8.

Website is here: http://www.doolietraders.com/ - Select one of the tracking codes to pull up the map.

Added notes:

The map is in a web formview in a master page situation so I load on the body of that. This is then loaded via the databound event of the formview.

           Dim body As HtmlGenericControl = DirectCast(Master.FindControl("mBody"), HtmlGenericControl)
           body.Attributes.Add("OnLoad", "initialize(" & strLat & "," & strLong & ")")

Thank you

Michael

[geoco...@gmail.com]

On Jan 18, 11:17 am, Michael Rex Schumacher

<michaelrexschumac...@gmail.com> wrote:
> Hello,
>
> Using Google API v3
>
> Both the default marker and custom marker sizes are getting
> inflated/stretched when my map displays in Firefox or Chrome, but
> strangely it works fine in IE8.
>

> Website is here:http://www.doolietraders.com/- Select one of the

> tracking codes to pull up the map.

var image = new google.maps.MarkerImage(
'images/1I_Icon.png',
new google.maps.Size(44, 40),
new google.maps.Point(0, 0),
new google.maps.Point(10, 40)
);

This icon is 20x40:
http://www.doolietraders.com/images/1I_Icon.png

Have you tried defining the correct size for it?

-- Larry

[Michael Rex Schumacher]

Larry,

Thanks for the suggestion, but yes, I've tried it all. Even the default marker without sizing indicated results in the same problem.

I am now thinking it might be a way that FF and Chrome deal with images rather than a Google API issue. My other images on the site are pixelated (less clear).

Michael

[geoco...@gmail.com]

On Jan 18, 12:56 pm, Michael Rex Schumacher

This is what I see from "inspect element" in Chrome:
<div style="overflow-x: hidden; overflow-y: hidden; position:
absolute; width: 20px; height: 40px; background-size: 20px 40px; left:
500px; top: 184px; -webkit-transform: scale(4); z-index: 284;
background-image: url(http://www.doolietraders.com/images/
1I_Icon.png); background-position: 0px 0px; background-repeat: no-
repeat no-repeat; "></div>

Notice the "scale(4)". The size it is displaying is 80x160 (x4 what
it should be).

I have no idea why. All my custom markers seem to be OK.

-- Larry

[Pil]

I believe this an API issue.


Seems you need to define the scaledSize as fourth argument. This
should exactly double the actual size of the icon

var g = google.maps;
var image = new g.MarkerImage("http://www.doolietraders.com/images/
1I_Icon.png",
new g.Size(40, 80),
null,
null,
new g.Size(40, 80));

And you shouldn't define a shadow which doesn't exist or can't be
loaded.



On Jan 18, 9:56 pm, Michael Rex Schumacher

[Pil]

On Jan 20, 7:13 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Jan 18, 12:56 pm, Michael Rex Schumacher

> Notice the "scale(4)".  The size it is displaying is 80x160 (x4 what
> it should be).

Your defined width added 120% to the original width of the icon, your
defined height was the original height. The API seems do avoid image
distortions and therefore added also 120% to the original height.

I think this makes sense because not all scale values are
recommendable.

[geoco...@gmail.com]

I tried that on a local copy and it didn't seem to change anything
(adding the (theoretically optional per the documentation)
scaledSize).

I tried defining the size to be 20x40 also. Maybe I did something
wrong.

-- Larry

[Pil]

Hmm, here with my above defined icon sizes. Don't know if they are too
big or too small for the OP

http://www.wolfpil.de/v3/doolie.html

[geoco...@gmail.com]

OK. Thanks Pil, I could have sworn I tried this and it didn't work:
http://www.geocodezip.com/doolie.html

(although I did have the origin and anchor defined, but adding those
to your map doesn't change it; caulk it up to user error I guess)

-- Larry

[Michael Rex Schumacher]

Larry and Pil - 

Thank you for all the help!

When I look at http://www.geocodezip.com/doolie.html in Chrome it is correct. http://www.wolfpil.de/v3/doolie.html is still stretched. 

If I understood correctly, I need to pass the scaledSize in the new google.maps.MarkerImage.

I'll test that, but I'm still not sure why the default marker would have the same reaction.

Michael

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
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.

[geoco...@gmail.com]

On Jan 20, 6:00 am, Michael Rex Schumacher

<michaelrexschumac...@gmail.com> wrote:
> Larry and Pil -
>
> Thank you for all the help!
>
> When I look athttp://www.geocodezip.com/doolie.htmlin Chrome it is
> correct.http://www.wolfpil.de/v3/doolie.htmlis still stretched.

The image is 20x40, his page makes it 40x80
new g.Size(40, 80),
(which is why I believe he said: "Don't know if they are too
big or too small for the OP")

the version I posted has:
new g.Size(20, 40),

-- Larry

>
> If I understood correctly, I need to pass the scaledSize in the new
> google.maps.MarkerImage.
>
> I'll test that, but I'm still not sure why the default marker would have the
> same reaction.
>
> Michael
>

> On Thu, Jan 20, 2011 at 7:45 AM, geocode...@gmail.com
> <geocode...@gmail.com>wrote:

>
>
>
>
>
>
>
> > On Jan 20, 5:31 am, Pil <wolf...@gmail.com> wrote:
> > > Hmm, here with my above defined icon sizes. Don't know if they are too
> > > big or too small for the OP
>
> > >http://www.wolfpil.de/v3/doolie.html
>
> > OK. Thanks Pil, I could have sworn I tried this and it didn't work:
> >http://www.geocodezip.com/doolie.html
>
> > (although I did have the origin and anchor defined, but adding those
> > to your map doesn't change it; caulk it up to user error I guess)
>
> >  -- Larry
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .

[Michael Rex Schumacher]

The suggested addition of the scaledSize constructor did the trick! Thank you again.

 

Funny though - the default marker icon will still stretch unless you explicitly define the Marker Image class.

 

That wasn't very clear to me and that custom marker service I used did not define it either.

 

Ah well, my problem's solved any way.

 

Cheers.

 

 

To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.