Marqueur de carte Google n'apparaissant pas sur la première page de chargement, mais apparaît sur l'actualisation

Question

Je montre le marqueur différent sur la carte, le problème est que parfois (spécialement quand je réinitialise le serveur web) la carte est chargée correctement et même montre l'ombre des points mais les marqueurs ne sont pas montrés/visibles sur la carte. Cependant sur les appels suivants les marqueurs sont montrés correctement (peut-être cachés, mais pas sûrs). Ce comportement est cohérent dans tous les navigateurs IE IE 6/7/8, Chrome, Firfox 3.5.6.

Le javascript ci-dessous crée le marqueur. Sur la ligne de touche, comme les marqueurs peuvent être de différentes tailles, je dois d'abord déterminer leur largeur et leur taille (sinon ils ont l'air déformés).

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); 

Merci.

Answer 1

Vous ne savez pas pourquoi vous utilisez G_DEFAULT_ICON dans votre constructeur.

Pour faire une icône personnalisée, utilisez quelque chose comme:

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

Une fois que vous réinitialiser le serveur et vous essayez de charger l'image référencée dans groupMarkerUrl, voyez-vous correctement?

Answer 2

Votre problème est que

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

prend un certain temps. Comme vous utilisez imgTemp.width et imgTemp.height sans attendre le chargement de l'image, ces valeurs risquent d'être nulles. L'API tracera vos icônes à la taille zéro.

Dans les navigateurs autres que MSIE, vous pouvez omettre icon.iconSize (et ne pas copier les détails de G_DEFAULT_ICON comme mentionné par mopoke) et le marqueur prendra par défaut la taille de l'image si l'image est arrivée au moment où le marqueur affiché. Dans MSIE, pour les images PNG, l'API utilise le AplphaImageLoader qui prend par défaut la taille zéro si une taille n'est pas spécifiée.

Le workround est de pré-charger vos images correctement, en plaçant cette ligne de code, afin qu'il soit exécuté avant l'événement onload

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

Et placer l'icône de votre code de création dans une fonction onload, de sorte qu'il doesn Ne pas être exécuté avant que toutes les images chargées par le code inline aient été complètement récupérées.