Google Map Marker not showing up on first page load, but appears on refresh

Question

I am displaying the different marker on the map , the problem is that sometimes (specially when I reset the web server) the map is loaded properly and it even shows the shadow of the points but the markers are not shown/visible on the map.However on the subsequent calls the markers are shown properly (perhaps cached , but not sure). This behavior is consistent in all browsers namely IE 6/7/8 , Chrome , Firfox 3.5.6.

The javascript shown below creates the marker. On the sideline, as markers can be of different sizes, I need to first determine there width and size (other wise they look deformed).

var imgTemp = new Image();
imgTemp.name = "img_" + i.toString();
imgTemp.src = groupMarkerUrl; //url to the actual image

point = new GLatLng(parseFloat(latitude), parseFloat(longitude));
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = groupMarkerUrl;
icon.iconSize = new GSize(imgTemp.width, imgTemp.height); //Width x Height
icon.iconAnchor = new GPoint(14, 15);
icon.infoWindowAnchor = new GPoint(5, 1);
marker = new GMarker(point, icon);
map.setCenter(point, 13);

//build the information box
var htmlContent = "<div style=\"color:#000000\"><span style=\"font-weight:bold;\">" + title + "</span><br/>";
if (address != "") {
    htmlContent += address + " ";
}
if (zipcode != "") {
    htmlContent += "<br/>" + zipcode + ", ";
}
if (city != "") {
    htmlContent += city;
}
if (telephone != "") {
    htmlContent += "<br/>Tel : " + telephone;
}
if (fax != "") {
    htmlContent += "<br/>Fax : " + fax;
}

htmlContent += "</div>";

map.addOverlay(marker);

markerKeys.push(stamp);

markers[stamp] = marker;
//Add legends with group markers one for each group
if (null == legends[groupId]) {

    legends[groupId] = groupMarkerUrl;
    var nbsp = document.createTextNode("  ");
    var image = document.createElement("img");
    image.setAttribute("src", groupMarkerUrl);
    image.setAttribute("style", "margin-left:10px !important; border:\"0\";");

    pushpinPnlConsole.appendChild(nbsp);
    pushpinPnlConsole.appendChild(image);

    pushpinPnlConsole.setAttribute("style", "display:block");

}

eval("GEvent.addListener(markers[stamp] , \"click\", function(){markers['" + stamp + "'].openInfoWindowHtml(windowHtmls['" + stamp + "']);});");
windowHtmls[stamp] = htmlContent;
opticianTBody.appendChild(row);

Thanks.

Answer 1

Not sure why you're using G_DEFAULT_ICON in your constructor.

To do a custom icon, use something like:

var icon = new GIcon();
icon.image = groupMarkerUrl;
//...

After you reset the server and you try and load the image referenced in groupMarkerUrl, do you see it correctly?

Answer 2

Your problem is that

  imgTemp.src = groupMarkerUrl; //url to the actual image

takes some time to complete. Since you use imgTemp.width and imgTemp.height without waiting for the image to load, those values are likely to be zero. The API will plot your icons at zero size.

In browsers other than MSIE, you can omit the icon.iconSize (and not copy the details from G_DEFAULT_ICON as mentioned by mopoke) and the marker will default to the image size if the image has arrived by the time the marker gets displayed. In MSIE, for PNG images, the API uses the AplphaImageLoader which defaults to size zero if a size is not specified.

The workround is to preload your images properly, by placing this code inline, so that it gets executed before the onload event

var imgTemp = new Image();
imgTemp.name = "img_" + i.toString();
imgTemp.src = groupMarkerUrl; //url to the actual image

And placing your icon creation code in an onload function, so that it doesn't get executed until after all the images loaded by the inline code have been completely fetched.