Feature request

[arjenmeijer]

the widget('\pigolab\locationpicker\CoordinatesPicker' is a superior solution. One can enter an address and the longitude and latitude are returned.
However, sometimes you need the map to return the address and a description of the object after positioning the locator somewhere, i.e. after selection a point on the map return
location name: Owa Benelux B.V.
location address: Maroastraat 4, 1060 Amsterdam, Nederland
and the longitude and latitude.
The address is on the map. Is there a way to retrieve this address in Yii2? Moreover, is it possible to get the name of the object, if available?

[pigochu]

You can see http://logicify.github.io/jquery-locationpicker-plugin example: Advanced usage of geo decoder features

define "onchanged" and "oninitialized" in clientOptions can do the same thing , $('# your widget id").locationpicker('map').location can get All info about location.

if you want to get google map instance , $('# your widget id").locationpicker('map').map is GoogleMap instance.

[arjenmeijer]

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\web\JsExpression;

?>

<div class="plaats-form">

    <?php $form = ActiveForm::begin(); ?>

    <div class="plaats-form">
        <div class="row">
            <div class="col-sm-8">
                <?= $form->field($model, 'Location')->textInput(['placeholder' => 'location']) ?>
            </div>          
            <div class="col-sm-4">
                <?= $form->field($model, 'latitude')->textInput(['placeholder' => 'Latitude']) ?>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <?= $form->field($model, 'address')->textInput(['placeholder' => 'address']) ?>
            </div>
            <div class="col-sm-4">
                <?= $form->field($model, 'longitude')->textInput(['placeholder' => 'Logitude']) ?>
            </div>
        </div>
    </div>

    <?php

          echo $form->field($model, 'gps')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
              // 'key' => 'abcabcabc...' ,   // optional , Your can also put your google map api key
                    // Users of the standard API:  2,500 free requests per day    10 requests per second 
              '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' => 'display:none;width:1px;', // Optional , default width and height defined in css coordinates-picker.css
              ],
              'enableMapTypeControl' => true , // Optional , default is true
              'clientOptions' => [
                'radius'    => 1,
            'inputBinding' => [
              'latitudeInput'     => new JsExpression("$('#plaats-latitude')"),
              'longitudeInput'    => new JsExpression("$('#plaats-longitude')"),
      //        'radiusInput'       => new JsExpression("$('#us2-radius')"),
              'locationNameInput' => new JsExpression("$('#plaats-address')")
            ]
              ]
          ]);

        echo '<div style="text-align: left; margin-top: 20px">';
            echo Html::submitbutton('<i class="glyphicon glyphicon-ok"></i> '.Yii::t('app', 'Submit'), ['type'=>'button', 'class'=>'btn btn-success']).' '.
                 Html::a('<i class="glyphicon glyphicon-arrow-left"></i> '.Yii::t('3de5', 'Beheer {modelClass}', ['modelClass' => 'Plaats',]), ['plaats/index'], ['class' => 'btn btn-info']).' '.
                 Html::resetbutton('<i class="glyphicon glyphicon-refresh"></i> '.Yii::t('app', 'Reset'), ['type'=>'button', 'class'=>'btn btn-warning']);
          ActiveForm::end();
        echo '</div>';
     ?>

</div>

This works fine, but it takes a lot of room to display the yii2 fields. I did not succeed in displaying the fields on the map.

[pigochu]

If u want to display textField on map
U must write some code in ["clientOptions" => "oninitialized" => [ .... ]]
and use google map api to push textField

Example :

<?php
$js = <<<EOT
function(component) {
    $(component).locationpicker('map').map.controls[google.maps.ControlPosition.TOP_LEFT].push($('#textFieldID').get(0));
}
EOT;
echo $form->field($model, 'gps')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
    'clientOptions' => [
        'oninitialized' => new JsExpression($js)
    ]
]);

[arjenmeijer]

Thank you! I will try it.

[arjenmeijer]

Thanks for version 0.2 (Add a comma before streetview in the exampel)

I am still struggling to get get two field on the map.
My code is:

<?php
$js = "function(component) {
    $(component).locationpicker('map').map.controls[google.maps.ControlPosition.TOP_LEFT].push($('#plaats-plaatsomschrijving').get(0));
    $(component).locationpicker('map').map.controls[google.maps.ControlPosition.TOP_LEFT].push($('#plaats-plaatsadres').get(0));
}";
      echo $form->field($model, 'gps')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
          // 'key' => 'abcabcabc...' ,   // optional , Your can also put your google map api key
                // Users of the standard API:  2,500 free requests per day    10 requests per second 
          'valueTemplate' => '{latitude},{longitude}' , // Optional , this is default result format
          'options' => [
              'style' => 'width: 100%; height: 60vh',  // map canvas width and height
          ] ,
          'enableSearchBox' => true , // Optional , default is true
          'searchBoxOptions' => [ // searchBox html attributes
              'style' => 'width:45%;', // 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.BOTTOM_LEFT'),
            ],
            'streetViewControl' => true, // Enable Street View Control
        ],
          'clientOptions' => [
            'radius'    => 1,
          'inputBinding' => [
            'latitudeInput'     => new JsExpression("$('#plaats-latitude')"),
            'longitudeInput'    => new JsExpression("$('#plaats-longitude')"),
            'locationNameInput' => new JsExpression("$('#plaats-plaatsadres')")
          ],
        'oninitialized' => new JsExpression($js)
          ]
      ])->label(false)->hint(false);

In the second line I tied plaatsadres to the inputfield, and in inputbindings to locationNameInput. It displays correct, but does not store the values. Do you have any tips?

Thanks!

[pigochu]

Please post your final html source code let me look look.

or u can test ur self ,via var_dump($_POST) ,
if the value in the $_POST but not store in your Model , maybe something missing

• Model not have the field property
• scenarios() not define the field.