Custom Icons being displayed in Firefox but not IE ?

29 views
Skip to first unread message

samhail

unread,
Feb 25, 2010, 4:29:42 PM2/25/10
to Google Maps JavaScript API v3
Anyone have any experience of this ?

my code is slightly more complicated as i cam pulling from a database
and converting to the XML etc... but it looks perfect in relation with
creating the markers & icons.

example http://samhail.com/where/airsoft1/testa1.html

pete

unread,
Feb 25, 2010, 5:25:06 PM2/25/10
to Google Maps JavaScript API v3
Try changing

var Site_Marker = new google.maps.Marker()

to:

var Site_Marker = new google.maps.MarkerImage()

Chad Killingsworth

unread,
Feb 25, 2010, 5:34:51 PM2/25/10
to Google Maps JavaScript API v3
That's not the issue.

On line 33 of ias_call.js.php, Site_icon_url is undefined in Internet
Explorer. It appears that markers[i].getAttribute("type") is returning
"shop" (note lowercase) on the first iteration. You are checking for
equality to "Shop".

Chad Killingsworth

samhail

unread,
Feb 26, 2010, 6:31:10 AM2/26/10
to Google Maps JavaScript API v3
Hi Thanks for the replies.

Pete: i did try your suggestion but it didnt work - didnt even display
the icons in firefox with that call.

Nice find Chad ! thanks... i fixed that but its still not showing the
icons in IE.
How did you come across that, ive been using firebug in firefox but
that didnt show that error... or was it just good ould deep checking ?

On Feb 25, 10:34 pm, Chad Killingsworth

samhail

unread,
Feb 26, 2010, 6:33:49 AM2/26/10
to Google Maps JavaScript API v3
Sorry i just noticed that i still had the PHP script on which would
make it harder to analyse.
I have updated it back to ias_call.js (instead of using
ias_call.js.php)

Chad Killingsworth

unread,
Feb 26, 2010, 7:40:06 AM2/26/10
to Google Maps JavaScript API v3
Well since the problem was in IE, I used the developer tools that come
standard with IE 8 (under the tools menu). Not even close to as good
as Firebug, but it's a huge improvement for IE.

I'll take a look at it again now and see what I can find without that
error.

Chad Killingsworth

Marcelo

unread,
Feb 26, 2010, 7:56:06 AM2/26/10
to Google Maps JavaScript API v3
I can't see
http://samhail.com/where/airsoft1/ias_genxml.php
as I'm getting redirected to some other page, but in any case, try
making your var map global.
In theory, it shouldn't make any difference, but it might.

--
Marcelo - http://maps.forum.nu
--

samhail

unread,
Feb 26, 2010, 8:23:39 AM2/26/10
to Google Maps JavaScript API v3
Hi Marcelo - i have taken off the protection i used on that file so it
is readable now.

I also put saved it as http://samhail.com/where/airsoft1/ias_genxml.phps
for the source.

I'll check that out when i get home too Chad, they only have IE7 here
in work for us.

Thanks for all of yer input so far.

On Feb 26, 12:56 pm, Marcelo <marcelo...@hotmail.com> wrote:
> I can't seehttp://samhail.com/where/airsoft1/ias_genxml.php


> as I'm getting redirected to some other page, but in any case, try
> making your var map global.
> In theory, it shouldn't make any difference, but it might.
>
> --

> Marcelo -http://maps.forum.nu

Chad Killingsworth

unread,
Feb 26, 2010, 8:27:58 AM2/26/10
to Google Maps JavaScript API v3
Well your problem appears to be all CSS based - your script appears
fine. If you remove the "float: right" on the map_canvas div the
markers all show up (at least they did on my local copy).

So to fix it, you'll probably need to specify a size for your markers
which means creating a Marker Image object instead of just passing a
URL. Try changing lines 25 and 27 of ias_call.js to:

var Site_icon_url = new google.maps.MarkerImage('/images/tools.png',
new google.maps.Size(32, 37));

If that doesn't work, try not floating the map_canvas div.

If this works, I would consider it a bug with the API. I'm going to
make up a test page to verify this and post it to the issue tracker.

Chad Killingsworth

On Feb 26, 6:56 am, Marcelo <marcelo...@hotmail.com> wrote:
> I can't seehttp://samhail.com/where/airsoft1/ias_genxml.php


> as I'm getting redirected to some other page, but in any case, try
> making your var map global.
> In theory, it shouldn't make any difference, but it might.
>
> --

> Marcelo -http://maps.forum.nu

samhail

unread,
Feb 26, 2010, 8:35:55 AM2/26/10
to Google Maps JavaScript API v3
I think you found it that time !
it was the floating div style !

Thank you Chad.

I tried the new google.maps.MarkerImage method aswell... but
unfortunately that didnt work. It didnt even display the icons in
firefox anymore.

I will look at page layout so, i might try to put the divs in a table
and see how that works out.

As a matter of interest if you do raise it on the issue tracker can
you send me over a link.

I appreciate the help.

On Feb 26, 1:27 pm, Chad Killingsworth

> > > > theiconsin firefox with that call.


>
> > > > Nice find Chad ! thanks... i fixed that but its still not showing the

> > > >iconsin IE.

Chad Killingsworth

unread,
Feb 26, 2010, 9:30:38 AM2/26/10
to Google Maps JavaScript API v3
I did some more testing on this issue and filed a bug. This only
appears to be in effect when the browser is rendering in quirks mode.
Try adding a doctype to your HTML.

My test page is http://search.missouristate.edu/map/mobile/examples/float.htm

Adding either a doctype or specifing a marker size fixes the issue on
that page.

Chad Killingsworth

samhail

unread,
Feb 28, 2010, 7:21:30 AM2/28/10
to Google Maps JavaScript API v3
Hi Chad/anyone else...

I am having kind of the same problem again, in that now about 12 of
the icons are being displayed in IE where all of them are being
displayed in firefox.

I have tried putting in a DOCTYPE (tries about 8 that i found online)
and none of them worked, i have also tried to specify the icon size
which didnt work either.

(my hosting server has coincidently just gone down ! grrr. so
hopefully will be back up soon.)... and i said i would have this site
ready to go for today.

On Feb 26, 2:30 pm, Chad Killingsworth


<chadkillingswo...@missouristate.edu> wrote:
> I did some more testing on this issue and filed a bug. This only
> appears to be in effect when the browser is rendering in quirks mode.
> Try adding a doctype to your HTML.
>

> My test page ishttp://search.missouristate.edu/map/mobile/examples/float.htm

pete

unread,
Feb 28, 2010, 5:04:38 PM2/28/10
to Google Maps JavaScript API v3
I've replicated this issue in IE6.

Basicailly, I got it working by defining a size for the icon

For marker 3 you have
new google.maps.Size(32, 32)

Add this property to your other 2 markers and they will show up.

Although marker 1 needs it's icon property defined as
icon: new google.maps.MarkerImage("ShuttleStopMarker.png", new
google.maps.Size(32, 32))

Let us know how you go

Pete

samhail

unread,
Mar 1, 2010, 3:36:17 AM3/1/10
to Google Maps JavaScript API v3
hey mate - that was Chads test page that he did up for google bugs
when he reported the issue
Reply all
Reply to author
Forward
0 new messages