API Google Maps (dynamique): tracer plusieurs emplacements via URL, affichant des marqueurs personnalisés

Question

J'ai implémenté avec succès du code pour tracer dynamiquement plusieurs emplacements sur google maps.

Solution: (link)

Je suis en train de créer des étiquettes personnalisées, comme ceci:

http://www.codeproject.com/KB/scripting/Use_of_Google_Map/ex7.JPG

utilisant le marqueur de Tom Morgan:

http://abhi2434.googlepages.com/tlabel.2.05.js

adapté à ce code ci-dessous . (! Mon but est de garder le premier code Je suis déjà en utilisant les marqueurs mais permettent personnalisés à partir du second code! Chaque fois que j'essaie d'adapter le deuxième code, il échoue ....)

Google Les cartes

<div id="map" style="width: 550px; height: 450px"></div> 

<script type="text/javascript"> 
//<![CDATA[ 

if (GBrowserIsCompatible()) { 
    var openbubble=true; 
    var agent = navigator.userAgent.toLowerCase(); 
// For IE We need to Do this 
    if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){ 
    var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='gmarker.png', sizingMethod='crop');"; 
    icon = '<div style="height:34px; width:20px; ' +loader+ '" ></div>' 
    } 

    var n=0; 
    function createTLabel(point,html) { 
    var label = new TLabel(); 
    label.id = 'Label '+n; 
    label.anchorLatLng = point; 
    label.anchorPoint = 'bottomCenter'; 
    label.content = html; 
    label.markerOffset = new GSize(-1,-5); 
    map.addTLabel(label); 
    var obj=document.getElementById(label.id); 
    GEvent.addDomListener(obj, "click", function() { 
      //map.openInfoWindowHtml(point, html, {pixelOffset: new GSize(0,-34)}); 
    });   

    n++; 
    } 

    var map = new GMap2(document.getElementById("map")); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(43.907787,-79.359741),8); 
    // Creating the HTML to show markers 
    var hContent = '<div style="padding: 0px 0px 13px 0px; background: url(
     images/pt_bot_ctr_ora.png) no-repeat bottom center;"> 
     <div style="text-align: center; background-color: #f2c30c; padding: 2px; 
     font-size: 0.75em; font-weight: bold;" onclick="openInfo(\'hInfo\')">MyInfo 
     </div>'; 
    hContent+='<div id="hInfo" style="position: absolute; display: none;">'; 
    hContent+='<div style="width: 81px; background-color: #000; padding: 3px; 
     font-size: 0.75em; color: #fff; text-align: left; border: 1px solid #f2c30c;"> 
     This is my content</div>'; 
    hContent+='</div></div>'; 
    createTLabel(new GLatLng(43.65654,-79.90138),hContent); 

} 

else { 
    alert("Sorry, the Google Maps API is not compatible with this browser"); 
} 
function openInfo(d) 
{ 
    var obj = document.getElementById(d); 
    if(openbubble==true) 
    { 
     obj.style.display="block"; 
     openbubble=false; 
    } 
    else 
    { 
     obj.style.display="none"; 
     openbubble=true; 
    } 
} 
//]]> 
</script> 

Answer 1

tlabel est désuète. Je résolu ce problème en utilisant étiquette électronique Mike Williams:

http://econym.org.uk/gmap/elabel.htm