The widget implement jquery-locationpicker-plugin
, (*1)
Installation
The preferred way to install this extension is through composer., (*2)
Either run, (*3)
php composer.phar require pigochu/yii2-jquery-locationpicker ">=0.2.0"
or add, (*4)
"pigochu/yii2-jquery-locationpicker": ">=0.2.0"
to the require section of your composer.json file., (*5)
Basic Usage for Test
= \pigolab\locationpicker\LocationPickerWidget::widget(); ?>
This sample is transformed via http://logicify.github.io/jquery-locationpicker-plugin/#usage, (*6)
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>
'abcabcabcabc ...', // require , 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,
'addressFormat' => 'street_number',
'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 :, (*7)
- enable/disable search box , search box will overlay on map
- enable/disable all googlemap's control
, (*8)
Example :, (*9)
<?php
echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
'key' => 'abcabcabc...' , // require , 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
],
'searchBoxPosition' => new JsExpression('google.maps.ControlPosition.TOP_LEFT'), // optional , default is TOP_LEFT
'mapOptions' => [
// google map options
// visit https://developers.google.com/maps/documentation/javascript/controls for other options
'mapTypeControl' => true, // Enable Map Type Control
'mapTypeControlOptions' => [
'style' => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
'position' => new JsExpression('google.maps.ControlPosition.TOP_LEFT'),
],
'streetViewControl' => true, // Enable Street View Control
],
'clientOptions' => [
// jquery-location-picker options
'radius' => 300,
'addressFormat' => 'street_number',
]
]);
?>
Get coordinates :, (*10)
Default valueTemplate is '{latitude},{longtitude} , So we will get resulit like : '25.023308046766083,121.46041916878664', (*11)
We can convert it via explode() :, (*12)
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., (*13)
Example : enable rotateControl , streetViewControl , mapTypeControl and set style/position, (*14)
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, (*15)
Other DocumentS
Wallogit.com
