Make label text in center for Google Maps API v3 marker with label

I am using Google Maps API v3 marker with label in one of my project. Here is the link of basic example what I am talking about.
I got stuck making the label center of the marker image. After spending some time I got the simple solution..

.labels{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    opacity: 1;
    pointer-events: none;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}

function initialize() {
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var marker = new MarkerWithLabel({
          position: new google.maps.LatLng(0,0),
          draggable: true,
          map: map,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
        });

      }

You can make the label float above the marker pushpin with an anchor point like new google.maps.Point(20, 50)

Integrate Remote Data using select2

I was trying to integrate the Select2 plugin for remote data. Select2 comes with AJAX/JSONP support built in. I am using this plugin for the first time. I followed the reference code from the following link  to write my code.

http://ivaynberg.github.io/select2/#ajax

HTML input should be a hidden input if you want to use a ajax function.

JavasSript code are as follows

$(document).ready(function () {



function format_city(obj){
            return obj.City;
}

$("#select_city").select2({
            minimumInputLength: 2,
            placeholder: 'Type in City Names...',
            multiple:true,
            ajax: { 
                url: base_url+"property/getCities",
                dataType: 'json',
                data: function (term) {
                    return {
                        q: term, // search term
                        page_limit: 10
                    };
                },
                results: function (data) { 
                    return {results: data, text:'City'};
                    
                }
            },
            formatResult: format_city, 
            formatSelection: format_city
            
        });
});

My Ajax function return json value. which contains data like  [{City:'Anderson',City:'New York'}]

ajax: { 
    url: base_url+"property/getCities",
    dataType: 'json',
    data: function (term) {
          return {
             q: term, // search term
             page_limit: 10
           };
        },
        results: function (data) { 
        return {results: data, text:'City'};
    }}

When I run the script it was not working properly. I spend almost 1 hours and after that come to know the big issue. Actually result of json data requires a "id". if in the result its not found that it will not work.

I have added the following code

$("#select_city").select2({
.....
id: function(obj) {
    return obj.City; // use slug field for id
},
.....
});

Add Marker with Label for Google Maps API V3

For last couple of days I was searching for Google Map Marker with Label functionality then I found the following PHP class in PHP Google Maps API. I did use this class for both CakePHP and conventional PHP.

This class really help me to integrate the goole map advance features easily in my real estate application. but one feature was missing in the library and that was Label in marker. 

I need that label to show the property price in the marker. I start searching for the feature and finally I found it in the following address

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html

After 1-2 hours dig down in the script I have decided to integrate this feature in the PHP Google Maps API.

What I did is here I am trying to share with you...

Added the following variables for the class..

var $marker_with_label = true;

var $marker_label_js = "js/gmap/markerwithlabel.js";

Update the functions as like below

function getHeaderJS() { 
    if($this->marker_with_label){
    $_headerJS .= "";
    }
}

function getUtilityFunctions(){
   $_script = "";
   if(!empty($this->_markers)&& $this->marker_with_label)
    $_script .= $this->getCreateMarkerWithLabelJS();
         else
             $_script .= $this->getCreateMarkerJS();
}

function getAddMarkersJS($map_id = "", $pano= false) {
  //defaults
  if($map_id == ""){
   $map_id = $this->map_id;
  }
  
  if($pano==false){
   $_prefix = "map";
  }else{
   $_prefix = "panorama".$this->street_view_dom_id;
  }
        $_output = '';
        foreach($this->_markers as $_marker) {

            $iw_html = str_replace('"','\"',str_replace(array("\n", "\r"), "", $_marker['html']));
            $_output .= "var point = new google.maps.LatLng(".$_marker['lat'].",".$_marker['lon'].");\n";
            if($this->marker_with_label){
                $_output .= sprintf('%s.push(createMarkerWithLabel(%s%s, point,"%s","%s", %s, %s, "%s", %s, "%s" ));',
                    (($pano==true)?$_prefix:"")."markers".$map_id,
                    $_prefix,
                    $map_id,
                    str_replace('"','\"',$_marker['title']),
                    str_replace('/','\/',$iw_html),
                    (isset($_marker["icon_key"]))?"icon".$map_id."['".$_marker["icon_key"]."'].image":"''",
                    (isset($_marker["icon_key"])&&isset($_marker["shadow_icon"]))?"icon".$map_id."['".$_marker["icon_key"]."'].shadow":"''",
                    (($this->sidebar)?$this->sidebar_id:""),
                    ((isset($_marker["openers"])&&count($_marker["openers"])>0)?json_encode($_marker["openers"]):"''"),
                    (string)$_marker['price']
                ) . "\n";
            }
           else
           {
               $_output .= sprintf('%s.push(createMarker(%s%s, point,"%s","%s", %s, %s, "%s", %s ));',
                   (($pano==true)?$_prefix:"")."markers".$map_id,
                   $_prefix,
                   $map_id,
                   str_replace('"','\"',$_marker['title']),
                   str_replace('/','\/',$iw_html),
                   (isset($_marker["icon_key"]))?"icon".$map_id."['".$_marker["icon_key"]."'].image":"''",
                   (isset($_marker["icon_key"])&&isset($_marker["shadow_icon"]))?"icon".$map_id."['".$_marker["icon_key"]."'].shadow":"''",
                   (($this->sidebar)?$this->sidebar_id:""),
                   ((isset($_marker["openers"])&&count($_marker["openers"])>0)?json_encode($_marker["openers"]):"''")
               ) . "\n";
           }


        }
        
        if($this->marker_clusterer && $pano==false){//only do marker clusterer for map, not streetview
         $_output .= "
            markerClusterer".$map_id." = new MarkerClusterer(".$_prefix.$map_id.", markers".$map_id.", {
            maxZoom: ".$this->marker_clusterer_options["maxZoom"].",
            gridSize: ".$this->marker_clusterer_options["gridSize"].",
            styles: ".$this->marker_clusterer_options["styles"]."
          });
           
         ";
        }
        return $_output;
    }

function getCreateMarkerWithLabelJS(){
        $_output = "
        function createMarkerWithLabel(map, point, title, html, icon, icon_shadow, sidebar_id, openers,label){

        var marker1 = new MarkerWithLabel({
                   position: point,
                   map: map,
                   labelContent:'$'+label ,
                   labelAnchor: new google.maps.Point(22, 10),
                   labelClass: 'labels', // the CSS class for the label
                   icon:icon,
                   shadow:icon_shadow
                 });

       //if(icon!=''){marker_options.icon = icon;}
       //if(icon_shadow!=''){marker_options.shadow = icon_shadow;}

       //create marker
       //var new_marker = new google.maps.Marker(marker_options);
       if(html!=''){
     ".(($this->info_window)?"

           google.maps.event.addListener(marker1, '".$this->window_trigger."', function() {
              infowindow.close();
              infowindow.setContent(html);
              infowindow.open(map,marker1);
           });

     if(openers != ''&&!isEmpty(openers)){
              for(var i in openers){
                var opener = document.getElementById(openers[i]);
                opener.on".$this->window_trigger." = function() {

                 infowindow.close();
                 infowindow.setContent(html);
                 infowindow.open(map,marker1);

               return false;
                };
              }
           }
     ":"")."
           if(sidebar_id != ''){
               var sidebar = document.getElementById(sidebar_id);
      if(sidebar!=null && sidebar!=undefined && title!=null && title!=''){
       var newlink = document.createElement('a');
       ".(($this->info_window)?"
             newlink.onclick=function(){infowindow.open(map,marker1); return false};
       ":"
       newlink.onclick=function(){map.setCenter(point); return false};
       ")."
       newlink.innerHTML = title;
       sidebar.appendChild(newlink);
      }
           }
                }
       return marker1;
   }
     ";
        return $_output;
    }

function addMarkerByAddress($address,$title = '',$html = '',$price='',$tooltip = '', $icon_filename = '', $icon_shadow_filename='') {
        if(($_geocode = $this->getGeocode($address)) === false)
            return false;
        return $this->addMarkerByCoords($_geocode['lon'],$_geocode['lat'],$title,$html,$price,$tooltip, $icon_filename, $icon_shadow_filename);
    }

function addMarkerByCoords($lon,$lat,$title = '',$html = '',$price,$tooltip = '', $icon_filename = '', $icon_shadow_filename='') {
        $_marker['lon'] = $lon;
        $_marker['lat'] = $lat;
        $_marker['html'] = (is_array($html) || strlen($html) > 0) ? $html : $title;
        $_marker['title'] = $title;
        $_marker['tooltip'] = $tooltip;
        $_marker['price'] = (string)$price;

        if($icon_filename!=""){
            $_marker['icon_key'] = $this->setMarkerIconKey($icon_filename, $icon_shadow_filename);
            if($icon_shadow_filename!=""){
               $_marker['shadow_icon']=1;
            }   
        }else if( $this->default_icon != ''){
         $_marker['icon_key'] = $this->setMarkerIconKey($this->default_icon, $this->default_icon_shadow);
         if($this->default_icon_shadow!=""){
            $_marker['shadow_icon']=1;
         }
        }        
        $this->_markers[] = $_marker;
        $this->adjustCenterCoords($_marker['lon'],$_marker['lat']);
        // return index of marker
        return count($this->_markers) - 1;
    }

I know its lots of code here. But all you have to do search the functions and replace the function with the above functions...

Now you have to change few more code which you will call by map object.

 $gmap = new GoogleMap();
 $gmap->addMarkerByCoords($LONGITUDE, $LATITUDE, $title, $html_info_window_data,'your label text');