Show coordinates of the rectangle on the map?

[developer2wsx]

When moving the rectangle I want to know and display the coordinates of that position, as is done with the

rectangle.getBounds()

in javascript?

What would be the right way to do it? Thank you.

[tonydspaniard]

The map has an appendScript() https://github.com/2amigos/yii2-google-maps-library/blob/master/Map.php#L377 where you can add after initialization javascript and access the variables.

[developer2wsx]

Because what I need is to save the coordinates where the user places the rectangle on the map? Some examples? I need help.

[tonydspaniard]

@developer2wsx I am sorry I do not have the time to actually guide you throughout it step by step, but name the rectangle overlay and it will render js as var rect = ...., then on the script you append with appendScript, use that name (ie rect) to get its bounds, call ajax and submit the new location. I believe you will have to play with the events of the map in order to interact with user's actions.

[pedroriverove]

I have the same problem.

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\google\maps\LatLng;
use dosamigos\google\maps\Map;
use dosamigos\google\maps\overlays\Rectangle;
use dosamigos\google\maps\LatLngBounds;
use dosamigos\google\maps\layers\BicyclingLayer;

?>

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

<?php
$coord = new LatLng(['lat' => -1.831239, 'lng' => -78.18340599999999]);

    $map = new Map([
        'center' => $coord,
        'zoom' => 7,
    ]);

    // create rectangle
    $bounds = new LatLngBounds([
        'southWest' => new LatLng(['lat' => $model->south_west_lat, 'lng' => $model->south_west_lng]),
        'northEast' => new LatLng(['lat' => $model->north_east_lat, 'lng' => $model->north_east_lng]),
    ]);

    $rectangle = new Rectangle([
        'bounds' => $bounds, // here my bounds!
        'fillColor' => '#00FF00',
        'strokeColor' => 'red',
        'draggable' => true,
        'editable' => true,
    ]);

    $map->addOverlay($rectangle);

    $map->appendScript('
        var rectangle = new google.maps.Rectangle({
        map: map,
        bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng (-1.743391143288001, -79.98516381249999),
            new google.maps.LatLng (-1.1672520205625432, -76.98516381249999)
        ),
        fillColor:"#00FF00",
        strokeColor: "red",
        editable: true,
        draggable: true
    });

    google.maps.event.addListener (rectangle, "bounds_changed", function (){

        var coordenadas= rectangle.getBounds();
        
        document.getElementById("info").innerHTML = rectangle.getBounds();

        document.getElementById("restauranteprofile-north_east_lat").value=coordenadas.f.b;
        document.getElementById("restauranteprofile-south_west_lat").value=coordenadas.f.f;
        document.getElementById("restauranteprofile-south_west_lng").value= coordenadas.b.b;
        document.getElementById("restauranteprofile-north_east_lng").value=coordenadas.b.f;

    });
    ');

    $bikeLayer = new BicyclingLayer(['map' => $map->getName()]);
    $map->appendScript($bikeLayer->getJs());

    echo $map->display();
?>

<?= $form->field($model, 'south_west_lat')->hiddenInput()->label(false); ?>
<?= $form->field($model, 'south_west_lng')->hiddenInput()->label(false); ?>
<?= $form->field($model, 'north_east_lat')->hiddenInput()->label(false); ?>
<?= $form->field($model, 'north_east_lng')->hiddenInput()->label(false); ?>

<div class="form-group">
        <?php echo Html::submitButton(Yii::t('backend', 'Save'), ['class' => 'btn btn-outline']) ?>
</div>

<?php ActiveForm::end(); ?>

With the appendScript I assign the coordinates to each corresponding Input.

Any help is welcome.