jquery location picker widget for yii2 ¶

1. Installation
2. Basic Usage for Test
3. Binding UI with the widget
4. CoordinatesPicker
5. Deprecated options : enableMapTypeControl
6. Other DocumentS

The widget implement jquery-locationpicker-plugin

SourceCode: github

Installation ¶

The preferred way to install this extension is through composer.

Either run

php composer.phar require pigochu/yii2-jquery-locationpicker ">=0.2.0"

or add

"pigochu/yii2-jquery-locationpicker": ">=0.1.0"

to the require section of your composer.json file.

Basic Usage for Test ¶

<?= \pigolab\locationpicker\LocationPickerWidget::widget(); ?>

Binding UI with the widget ¶

This sample is transformed via http://logicify.github.io/jquery-locationpicker-plugin/#usage

<?php
use yii\web\JsExpression;
?>

Location: <input type="text" id="us2-address" style="width: 200px"/>
<br>
Radius: <input type="text" id="us2-radius"/>
<br>
Lat.: <input type="text" id="us2-lat"/>
<br>
Long.: <input type="text" id="us2-lon"/>
<br>


<?php
    echo \pigolab\locationpicker\LocationPickerWidget::widget([
       'key' => 'abcabcabcabc ...',	// optional , Your can also put your google map api key
       'options' => [
            'style' => 'width: 100%; height: 400px', // map canvas width and height
        ] ,
        'clientOptions' => [
            'location' => [
                'latitude'  => 46.15242437752303 ,
                'longitude' => 2.7470703125,
            ],
            'radius'    => 300,
            'inputBinding' => [
                'latitudeInput'     => new JsExpression("$('#us2-lat')"),
                'longitudeInput'    => new JsExpression("$('#us2-lon')"),
                'radiusInput'       => new JsExpression("$('#us2-radius')"),
                'locationNameInput' => new JsExpression("$('#us2-address')")
            ]
        ]        
    ]);
?>

CoordinatesPicker ¶

CoordinatesPicker let you get coordinates in ActiveForm , In addition I implemented some features not in original jquery-locationpicker-plugin :

• enable/disable search box , search box will overlay on map
• enable/disable all googlemap's control

Example :

<?php
	echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
		'key' => 'abcabcabc...' ,	// optional , Your can also put your google map api key
		'valueTemplate' => '{latitude},{longitude}' , // Optional , this is default result format
		'options' => [
			'style' => 'width: 100%; height: 400px',  // map canvas width and height
		] ,
		'enableSearchBox' => true , // Optional , default is true
		'searchBoxOptions' => [ // searchBox html attributes
			'style' => 'width: 300px;', // Optional , default width and height defined in css coordinates-picker.css
		],
		'mapOptions' => [
			// set google map optinos
			'rotateControl' => true,
			'scaleControl' => false,
			'streetViewControl' => true,
			'mapTypeId' => new JsExpression('google.maps.MapTypeId.SATELLITE'),
			'heading'=> 90,
            'tilt' => 45 ,
                
			'mapTypeControl' => true,
            'mapTypeControlOptions' => [
                  'style'    => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
                  'position' => new JsExpression('google.maps.ControlPosition.TOP_CENTER'),
			]
		]
		'clientOptions' => [
			'radius'    => 300,
		]
	]);
?>

if you var_dump($model->coordinates) , You will get result like : 25.023308046766083,121.46041916878664 , so you can get latitude and longitude via explode(',' , $model->coordinates) .

Deprecated options : enableMapTypeControl ¶

Since version 0.2.0 , don't use 'enableMapTypeControl' , I added 'mapOptions' for set googlemap options. You can enable/disable all controlls or set control's style , position now.

Example : enable rotateControl , streetViewControl , mapTypeControl and set style/position

<?php
   echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [

        'clientOptions' => [ 'zoom' => 20 ], // rotateControl will display when zoom is 20
        // .... other options ...
		'mapOptions' => [
			// set google map optinos
			'rotateControl' => true,
			'scaleControl' => false,
			'streetViewControl' => true,
			'mapTypeId' => new JsExpression('google.maps.MapTypeId.SATELLITE'),
			'heading'=> 90,
            'tilt' => 45 ,
                
			'mapTypeControl' => true,
            'mapTypeControlOptions' => [
                  'style'    => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
                  'position' => new JsExpression('google.maps.ControlPosition.TOP_CENTER'),
			]
		]
   ]);
?>

Please visit GoogleMaps Full Control document : https://developers.google.com/maps/documentation/javascript/controls

Other DocumentS ¶

please visit github : https://github.com/pigochu/yii2-jquery-locationpicker