Question

I have successfully implemented code to plot multiple locations on google maps dynamically.

Solution: (link)

I am trying to create customized labels, like this:

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

using Tom Morgan’s marker:

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

adapted with this code below. (!My goal is to keep the first code I am already using but allow the custom markers from the second code! Every time I try to adapt the second code, it fails….)

Google Maps

<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 is out-dated. I solved this using Mike Williams’ elabel:

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