title: add label overlay Google Maps
body: <p>I'm success add infowindow</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Google Map Lazy Load&lt;/title&gt;    
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://localhost/label/label.js"&gt;&lt;/script&gt;
  
          &lt;style&gt;
              #map-canvas{
                  width:100%;
                  height:500px; 
                  position: "absolute"; 
                  top: 0px; 
                  left: 0px; 
                  overflow: "hidden";
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="map-canvas"&gt;&lt;/div&gt;        
          &lt;script type="text/javascript"&gt;
              var map;
              function setMarkers(data) {
                  console.log('setMarkers');
                  console.log(data);
                  var markerJson = JSON.parse(data);
  
                  var pos;
                  var marker;
                  var allMarkers = [];
                  console.log(markerJson.length);
                  for (var i = 0; i &lt; markerJson.length; i++) {                    
                      pos = new google.maps.LatLng(markerJson[i].latitude, markerJson[i].longitude);
                      marker = new google.maps.Marker({
                          position: pos,
                          map: map,
                          title: 'Title',
                          icon:'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png'
  
                      });
  
  
                      /// INFO WINDOW //
                      marker['infowindow'] = new google.maps.InfoWindow({
                              content: markerJson[i].no_tiang
                          });
  
                      var currentinfo = null;
  
                      google.maps.event.addListener(marker, 'click', function() {
                          if(currentinfo) { currentinfo.close();}
                          this['infowindow'].open(map, this);
                          currentinfo = this['infowindow'];
                      });
                      /// INFO WINDOW //
  
                      allMarkers.push(marker);
                  }
              }
  
              function fetchMarkers() {
                  console.log('fetchMarkers');
                  var loaded_markers = ($('#loaded_markers').val() =='') ? 0 : $('#loaded_markers').val();
                  var offset = $('#offset').val();
                  console.log(loaded_markers + ' - '+ offset);
                  $.ajax({
                      type: "GET",
                      url: "lazy_load_ajax.php",
                      data: {
                          start: loaded_markers,
                          offset: offset
                      },                    
                      success: function(data) {
                          //var already_loaded = parseInt(loaded_markers) + parseInt(offset);
                         // $('#loaded_markers').val(already_loaded);
                          setMarkers(data);
                          setTimeout(function(){
                             // fetchMarkers();
                          }, 3000);
                      }
                  });
              }
  
              function initialize() {
                  console.log('initialize');
                  // Get center
                  var map_center = new google.maps.LatLng(0.574853, 123.048032);
                  var mapOptions = {
                      zoom: 13,
                      center: map_center,
                      //mapTypeId: google.maps.MapTypeId.HYBRID,
                      panControl: false,
                      streetViewControl: false,
                      mapTypeControl: false
                  };
                  // Load google map
                  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
                  fetchMarkers();
              }
  
              function loadScript() {                
                  var script = document.createElement('script');
                  script.type = 'text/javascript';
                  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;' + 'callback=initialize';
                  document.body.appendChild(script);
              }
              window.onload = loadScript;
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and now I want add label but I got error and the marker just showing 1 marker</p>
  
  <p><a href="http://img.ctrlv.in/img/15/05/31/556aa5419dbed.jpg" rel="nofollow">http://img.ctrlv.in/img/15/05/31/556aa5419dbed.jpg</a></p>
  
  <p>I add code label before code infowindow</p>
  
  <pre><code>/// LABEL ///
                      var label = new Label({
                         map: map
                       });
                       label.bindTo('position', marker, 'position');
                       label.bindTo('text', marker, 'position');
  
                       /// LABEL ///
  
                      /// INFO WINDOW //
                      marker['infowindow'] = new google.maps.InfoWindow({
                              content: markerJson[i].no_tiang
                          });
  
                      var currentinfo = null;
  
                      google.maps.event.addListener(marker, 'click', function() {
                          if(currentinfo) { currentinfo.close();}
                          this['infowindow'].open(map, this);
                          currentinfo = this['infowindow'];
                      });
                      /// INFO WINDOW //
  </code></pre>
  
  <p>script label.js</p>
  
  <pre><code>// Define the overlay, derived from google.maps.OverlayView
  function Label(opt_options) {
   // Initialization
   this.setValues(opt_options);
  
   // Label specific
   var span = this.span_ = document.createElement('span');
   span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                        'white-space: nowrap; border: 1px solid blue; ' +
                        'padding: 2px; background-color: white';
  
   var div = this.div_ = document.createElement('div');
   div.appendChild(span);
   div.style.cssText = 'position: absolute; display: none';
  };
  Label.prototype = new google.maps.OverlayView;
  
  // Implement onAdd
  Label.prototype.onAdd = function() {
   var pane = this.getPanes().overlayLayer;
   pane.appendChild(this.div_);
  
   // Ensures the label is redrawn if the text or position is changed.
   var me = this;
   this.listeners_ = [
     google.maps.event.addListener(this, 'position_changed',
         function() { me.draw(); }),
     google.maps.event.addListener(this, 'text_changed',
         function() { me.draw(); })
   ];
  };
  
  // Implement onRemove
  Label.prototype.onRemove = function() {
   this.div_.parentNode.removeChild(this.div_);
  
   // Label is removed from the map, stop updating its position/text.
   for (var i = 0, I = this.listeners_.length; i &lt; I; ++i) {
     google.maps.event.removeListener(this.listeners_[i]);
   }
  };
  
  // Implement draw
  Label.prototype.draw = function() {
   var projection = this.getProjection();
   var position = projection.fromLatLngToDivPixel(this.get('position'));
  
   var div = this.div_;
   div.style.left = position.x + 'px';
   div.style.top = position.y + 'px';
   div.style.display = 'block';
  
   this.span_.innerHTML = this.get('text').toString();
  };
  </code></pre>
  
  <p>I got script for add label from here <a href="http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html" rel="nofollow">http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html</a></p>