<!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. </p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
 <div id="log"></div>
</body>
</html>