Yii2 Yandex Google Map how to implement and store in the database?

https://github.com/kalyabin/yii2-select-google-map...

I zayuzat is an extension for the admin.
However, I had to have one entity to keep only 1 address.

Google, in my opinion, prevent to have multiple instances of the map on 1 page.
But to try is definitely worth it.

If you can unasledovala from this expansion and add it to the use of multiple labels for 1 entity.

PS. If you write, you will have a text-input + map. The card of events at click + drag tags. As soon as the mark appeared on the map — in the form add a hidden input with the coordinates of the markers. New label — new input. Moved the label — switched input.
Text-input is needed to the label do not put on the map, and specify the address in the text-input, and through the API to determine the coordinates of addresses and to mark these coordinates.

Code ideal does not apply, but it works

<?php

namespace application\widgets;

use webnula2\widgets\booster\TbActiveForm;
use webnula2\widgets\booster\TbBaseInputWidget;

/**
 * Class GoogleMap
*
 * @package application\widgets
*/
class GoogleMap extends TbBaseInputWidget
{
/**
 * @var $options
*/
 public $options;

/**
 * @var $cs
*/
 private $cs;

/**
*
*/
 public function init()
{
parent::init();

 $this--->cs = \Yii::app()->getClientScript();
}

 public function run()
{
 $options = array();

 if (empty($this->model[$this->attribute])) {
 if (empty($this->options['mapCenter'])) {
 $options['mapCenter'] = array('-8.36293738590362', '115.14429179101558');
}

 if (empty($this->options['point'])) {
 $options['point'] = $options['mapCenter'];
}

 if (empty($this->options['mapZoom'])) {
 $options['mapZoom'] = 10;
}

 if (empty($this->options['mapType'])) {
 $options['mapType'] = 'roadmap';
}
 } else {
 $options = $this->model[$this->attribute];
}

 $id = \CHtml::activeId($this->model, $this->attribute);

 $mapId = "GMapsID-" . $this->getId();

 $searchControlId = 'pac-input' . $this->getId();

 $js = <<<js 0 getmarkerposition function(marker) { return [marker.getposition().lat(), marker.getposition().lng()]; } initmap () var map; options="{" mapcenter: [{$options['mapcenter'][0]}, {$options['mapcenter'][1]}], point [{$options['point'][0]}, {$options['point'][1]}], mapzoom: {$options['mapzoom']}, maptype: "{$options['maptype']}" }; latlng=new google.maps.latlng(options.point[0], options.point[1]); map=new google.maps.map(document.getelementbyid('{$mapid}'), center: latlng, zoom: options.mapzoom, maptypeid: options.maptype }); marker=new google.maps.marker({ position: map: map, draggable: true input="document.getElementById('{$searchControlId}');" searchbox="new" google.maps.places.searchbox(input); map.controls[google.maps.controlposition.top_left].push(input); map.addlistener('bounds_changed', function(){ searchbox.setbounds(map.the getbounds()); markers="[];" markers.push(marker); searchbox.addlistener('places_changed', places="searchBox.getPlaces();" if (places.length="=" 0) return; markers.foreach(function(marker){ marker.setmap(null); bounds=new google.maps.latlngbounds(); places.foreach(function(place){ icon="{" URLs: place.icon, size: new google.maps.size(71, 71), origin: google.maps.point(0, 0), anchor: google.maps.point(17, 34), scaledsize: google.maps.size(25, 25) markers.push(new icon: icon, title: place.name, place.geometry.location })); (place.geometry.viewport){ bounds.union(place.geometry.viewport); else bounds.extend(place.geometry.location); map.fitbounds(bounds); googlemapsave(); *google.maps.event.addlistener(markers[0], 'drag', map.addlistener('zoom_changed', map.addlistener('maptypeid_changed', });* map.addlistener('mouseout', googlemapsave(){ getmarkerposition(markers[0]), map.getzoom(), map.getmaptypeid() $('#{$id}').val(json.stringify(options)); js; $css="<<<CSS" .controls margin-top: 10px; border: 1px solid transparent; border-radius: 2px 2px; box-sizing: border-box; -moz-box-sizing: height: 32px; outline: none; box-shadow: 6px rgba(0, 0, 0.3); #{$searchcontrolid} background-color: #fff; font-family: roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 11px 13px; text-overflow: ellipsis; width: 300px; #{$searchcontrolid}:focus border-color: #4d90fe; css; $this->cs->registerScriptFile("https://maps.googleapis.com/maps/api/js?key=AIzaSyDTOzQmfoHuYz5coANmmLtSezC-yMxnv8A&libraries=places&callback=initMap", \CClientScript::POS_END);
 $this->cs->registerScript($this->getId(), $js, \CClientScript::POS_HEAD);
 $this->cs->registerCss($this->getId(), $css);

 echo \CHtml::openTag('div', array('class' => 'map-container'));
 echo \CHtml::openTag('input', array('id' => $searchControlId, 'class' => 'controls' search-control', 'placeholder' => 'Search Box'));
 echo \CHtml::openTag('div', array('style' => 'width: 100%;height:400px', 'id' => $mapId));
 echo \CHtml::closeTag('div');
 echo \CHtml::closeTag('div');

 $this->model[$this->attribute] = \CJSON::encode($this->model[$this->attribute]);
 echo \CHtml::activeHiddenField($this->model, $this->attribute);
}
}</js>

I'm also trying to ad the card to tie. To add a single point set https://github.com/Kolyunya/yii2-map-input-widget
the field in database is one that stores a comma

And to display the coordinates https://github.com/2amigos/yii2-google-maps-library