Markers only appear after reloading the page

[alex]

Dear all,

when I open a fresh tab and load http://friends*removethis*ofplaces.com, the markers will not appear on the map. They have been loaded, because they are put also in a separate list, where they appear. After reloading the same page, the markers show up on the map.The behavior is slightly different in Firefox and Chrome. With Firefox, they don´t appear, when loading the Firefox Browser and having the site as the starting page. When opening a new tab and loading the page, they will appear, also when reloading the page. With Chrome, they will not appear also when loading a new tab with the page. After reloading, again, they appear.

The code to load the markers can be found within the function load_placemarks(), which is inline to the page. The function is called from within a loop in initialize(), which is reading the markers from a JSON array. The markers are stored in a separate array called m_Markers.

This is not a newbie question. I created many pages, with markers being loaded to a map with REST. But this is very strange behavior, and I don´t know how to debug it further. 

Very much forward looking for help,

Alex

[alex]

test

[sb]

If I use shift f5 it still doesn't load the markers.

Are you certain that the JSON array is fully loaded before you start
plotting the markers?

On Jan 19, 10:02 am, alex <alexander.roehni...@googlemail.com> wrote:
> Dear all,
>

> when I open a fresh tab and loadhttp://friends*removethis*ofplaces.com,

[alex]

Here is what is causing it, but don´t know why this happens only when loading from scratch.

Each marker gets an custum photo-icon. For that I have to create a google.maps.MarkerImage. To maintain the photo side-ratio, I have to give the MarkerImage the correct width and height. To get them, I create an Javascript Image object, which I load with the url of the icon, then retrieve the width and height property and divide both to get the variable img_ratio.

For some reason, when loading the page from scratch, the width and height of the Javascript Image object are Null, after setting the correct src-attribute, causing the variable img_ratio to be NaN. Now that I know that, I can set img_ratio arbitrarily to 1, which causes the icons to be quadratic, but at least they appear.

Somebody have an idea, why this is happening?

$.each(res.users, function(index, value)

{

var spotid = unescape(value.Name);

var point = new google.maps.LatLng(value.Lat, value.Lng);

var title = unescape(value.Name);

var folder = unescape(value.Folder);

var icon = unescape(value.Photo);

var description = unescape(value.Description);

var img = new Image();

img.src = icon;

alert(icon + ": " + img.width + " x " + img.height);

var img_ratio = parseFloat(img.height) / parseFloat(img.width);

if(isNaN(img_ratio))

img_ratio = 1;

var icon_size = new google.maps.Size(m_NormalImageSize, m_NormalImageSize * img_ratio);

var shadow_size = new google.maps.Size(m_NormalShadowSize, m_NormalShadowSize * img_ratio);

var image = new google.maps.MarkerImage(

icon,

icon_size,

new google.maps.Point(0,0),

new google.maps.Point(-3, m_NormalImageSize * img_ratio + 3 * img_ratio),

icon_size

);

[Andrew C Leach]

On 22 January 2012 14:00, alex <alexander...@googlemail.com> wrote:
>
> For some reason, when loading the page from scratch, the width and height of
> the Javascript Image object are Null, after setting the correct
> src-attribute, causing the variable img_ratio to be NaN. Now that I know
> that, I can set img_ratio arbitrarily to 1, which causes the icons to be
> quadratic, but at least they appear.
>
> Somebody have an idea, why this is happening?

Relevant lines are

> var icon = unescape(value.Photo);

> var img = new Image();
> img.src = icon;

> var img_ratio = parseFloat(img.height) / parseFloat(img.width);

Setting img.src to the url is instantaneous and the code moves on; but
the Image() won't have loaded that file by the time the height and
width attributes are required. They are still unset.

What you may be able to do is to use an onload handler to calculate
and use the img_ratio.

var img = new Image();

img.onload = calculateAndDisplay(img);
img.src = icon;
// move everything that needs to happen with the icon into that function

Apparently setting src before onload can be unreliable, so it needs to
be this way round.

[alex]

Andrew, thanks alot. I did like you said, and it works now.

Good to have in mind, that many Javascript objects have event handlers.