Saturday, May 30, 2015

Yii EGMap With Autocomplete Search Location


1. Add this function into extension EGMap.php
  public function addAutocomplete($inputId = null)
{
   
    if ($inputId === null)
      $autocomplete = new EGMapAutocomplete();
    else
      $autocomplete = new EGMapAutocomplete($inputId);

    $this->resources->add('autocomplete', new CTypedList('EGMapAutocomplete'));    
    $this->resources->itemAt('autocomplete')->add($autocomplete);
}
public function getAutocompleteJs()
{
    $return = '';
    if (null !== $this->resources->itemAt('autocomplete'))
    {
        foreach ($this->resources->itemAt('autocomplete') as $autocomplete)
        {
            $return .= $autocomplete->toJs($this->getJsName());
            $return .= "\n      ";
        }
    }
    return $return;
}

2. Create New file EGMapAutocomplete.php
class EGMapAutocomplete extends EGMapBase
{
  //String $url url of image
  protected $inputId;
  protected $marker_object = 'google.maps.places.Autocomplete';  
  
  const GMAP_LIBRARY = 'http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false';
   
  public function __construct( $inputId = 'searchTextField',$js_name = 'autocomplete')
  {
    $this->inputId = $inputId;
    $this->setJsName($js_name);    
  }
  
  /**
   * 
   * @return inputId
   */
  public function getInputId()
  {
    return $this->inputId;
  }

  /**
   * 
   * @return string js code to create the autoComplete
   */
 public function toJs($map_js_name = 'map')
 {
  $this->options['map'] = $map_js_name;
    $return = "var input = document.getElementById('".EGMap::encode($this->inputId)."');". PHP_EOL;
  $return .= $this->getJsName() . ' = new ' . $this->marker_object . '(input);' . PHP_EOL;
    $return .= $this->getJsName().".bindTo('bounds', ".$map_js_name.");" . PHP_EOL;

    $event = new EGMapEvent('place_changed', "function() {
          ".$map_js_name."_info_window.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            ".$map_js_name.".fitBounds(place.geometry.viewport);
          } else {
            ".$map_js_name.".setCenter(place.geometry.location);
            ".$map_js_name.".setZoom(17);  
          }
          ".$map_js_name."_marker.setPosition(place.geometry.location);
          
          var address = '';
          if (place.address_components) {
            address = [(place.address_components[0] &&
                        place.address_components[0].short_name || ''),
                       (place.address_components[1] &&
                        place.address_components[1].short_name || ''),
                       (place.address_components[2] &&
                        place.address_components[2].short_name || '')
                      ].join(' ');
          }

          ".$map_js_name."_info_window.setContent('
' + place.name + '
' + address); ".$map_js_name."_info_window.open(map, marker); }",false); $return .= $event->getEventJs($this->getJsName()) . PHP_EOL; return $return; } }
3. Add $params .= '&libraries=places'; this into registerMapScript function before CGoogleApi::init();
4. Add $init_events[] = $this->getAutocompleteJs(); into registerMapScript function bellow $init_events[] array.
 

Yii::import('ext.EGMap.*');
$gMap = new EGMap();
$gMap->setJsName('map');
$gMap->setWidth(827);
$gMap->setHeight(400);
$gMap->zoom = 6;
$gMap->addAutocomplete();

$mapTypeControlOptions = array(
  'position' => EGMapControlPosition::RIGHT_TOP,
  'style' => EGMap::MAPTYPECONTROL_STYLE_HORIZONTAL_BAR
);
 
$gMap->mapTypeId = EGMap::TYPE_ROADMAP;
$gMap->mapTypeControlOptions = $mapTypeControlOptions;
 
$icon = new EGMapMarkerImage("http://google-maps-icons.googlecode.com/files/workoffice.png");
 

$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);

$count = $dataProvider->getTotalItemCount();
 
if ($count > 0) {
 $i = 0;
 
 foreach($dataProvider->getData() as $record) {
 

     $marker[$i] = new EGMapMarker($record->lat, $record->lng, array('title' => Yii::t('catalog', $record->nama),
             'icon'=>$icon, 'draggable'=>false), 'marker', array());
 
     $info_window_m[$i] = new EGMapInfoWindow('
'.$record->nama.'
'); $marker[$i]->addHtmlInfoWindow($info_window_m[$i]); $gMap->addMarker($marker[$i]); $i++; } $gMap->setCenter($marker[0]->lat, $marker[0]->lng); $gMap->zoom = 12; } else { $gMap->setCenter(23.716564, 90.402359); } $gMap->renderMap(array(), Yii::app()->language);

No comments:

Post a Comment