<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Example</title>
 <style type="text/css">
   .labels {
     margin-top:-3px;
     padding: 5px;
     position: absolute;
    visibility: visible;
    z-index: 1030;
}
.labels.active .inner {
    background: cyan;
}
.labels.hover .inner {
    background-color: yellow;
}


.labels .arrow{
    border-top-color: green;
    border-right-color: rgba(0,0,0,0);
    border-bottom-color: rgba(0,0,0,0);
    border-left-color: rgba(0,0,0,0);
    border-width: 5px 5px 0;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
}
.labels .inner{
    background-color: green;
    border-radius: 4px;
    color: #FFFFFF;
    max-width: 200px;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;
}


.labels.active .arrow {
   
    border-top-color: #00ffff;
    border-right-color: rgba(0,255,255,0);
    border-bottom-color: rgba(0,255,255,0);
    border-left-color: rgba(0,255,255,0);

}
.labels.hover .arrow {
    border-top-color: #ffff00;
    border-right-color: rgba(255,255,0,0);
    border-bottom-color: rgba(255,255,0,0);
    border-left-color: rgba(255,255,0,0);
}
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="markerwithlabel.js"></script>
 <script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });
var clickIcon = {
    path: 'M8,0C3.400,0,0,3.582,0,8s8,24,8,24s8-19.582,8-24S12.418,0,8,0z M8,12c-2.209,0-4-1.791-4-4   s1.791-4,4-4s4,1.791,4,4S10.209,12,8,12z',
    fillColor: "#000000",
    fillOpacity: 1,
    strokeColor: "#000000",
    strokeWeight: 1,
    labelOrigin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(9, 35),
  };
     var marker1 = new MarkerWithLabel({
       position: homeLatLng,
    icon:" ",
labelContent: "<div class='inner'>$425564K</div><div class='arrow'></div><div class='arrow'></div>",
       map: map,
  label:"$d",
  labelAnchor: new google.maps.Point(35, 25),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 1.75}
     });
   
     var iw1 = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     var iw2 = new google.maps.InfoWindow({
       content: "Another Home For Sale"
     });

     google.maps.event.addListener(marker1, "mouseover", function (e) { iw1.open(map, this); });
google.maps.event.addListener(marker1, "mouseout", function (e) { iw1.close(); });
   
   }
 </script>
</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
 <div id="log"></div>
</body>
</html>