├── scripts └── compile-assets ├── sources ├── web │ ├── css │ │ ├── map-input-widget.min.css │ │ └── map-input-widget.css │ └── js │ │ ├── map-input-widget.min.js │ │ └── map-input-widget.js ├── assets │ └── MapInputAsset.php └── widgets │ ├── views │ └── MapInputWidget.php │ └── MapInputWidget.php ├── composer.json ├── README.md └── LICENSE.txt /scripts/compile-assets: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | cd ../sources/web 3 | yui-compressor js/map-input-widget.js > js/map-input-widget.min.js 4 | yui-compressor css/map-input-widget.css > css/map-input-widget.min.css 5 | -------------------------------------------------------------------------------- /sources/web/css/map-input-widget.min.css: -------------------------------------------------------------------------------- 1 | div.kolyunya-map-input-widget-canvas{width:100%;height:100%}input.kolyunya-map-input-widget-search-bar{width:42%;left:10px!important;top:10px!important;padding:5px} -------------------------------------------------------------------------------- /sources/web/css/map-input-widget.css: -------------------------------------------------------------------------------- 1 | div.kolyunya-map-input-widget-canvas 2 | { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | input.kolyunya-map-input-widget-search-bar 8 | { 9 | width: 42%; 10 | left: 10px !important; 11 | top: 10px !important; 12 | padding: 5px; 13 | } -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kolyunya/yii2-map-input-widget", 3 | "description": "Yii2 map input widget. Allows you to select geographcal coordinates via a human-friendly inteface.", 4 | "keywords": 5 | [ 6 | "yii2", 7 | "extension", 8 | "widget", 9 | "map", 10 | "input", 11 | "geocoding", 12 | "geo-coordinates", 13 | "coordinates" 14 | ], 15 | "homepage": "https://github.com/Kolyunya/yii2-map-input-widget", 16 | "type": "yii2-extension", 17 | "license": "GNU GPL v3.0", 18 | "authors": 19 | [ 20 | { 21 | "name": "Oleynikov Nikolay", 22 | "email": "OleynikovNY@mail.ru", 23 | "homepage": "http://github.com/Kolyunya/" 24 | } 25 | ], 26 | "autoload": 27 | { 28 | "psr-4": 29 | { 30 | "kolyunya\\yii2\\": "sources" 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /sources/assets/MapInputAsset.php: -------------------------------------------------------------------------------- 1 | \yii\web\View::POS_END, 20 | ]; 21 | 22 | public function __construct($config = []) 23 | { 24 | $this->js[] = $this->getGoogleMapScriptUrl(); 25 | if (YII_DEBUG) { 26 | $this->js[] = 'js/map-input-widget.js'; 27 | $this->css[] = 'css/map-input-widget.css'; 28 | } else { 29 | $this->js[] = 'js/map-input-widget.min.js'; 30 | $this->css[] = 'css/map-input-widget.min.css'; 31 | } 32 | parent::__construct($config); 33 | } 34 | 35 | private function getGoogleMapScriptUrl() 36 | { 37 | $scriptUrl = "//maps.googleapis.com/maps/api/js?"; 38 | $scriptUrl .= http_build_query([ 39 | 'key' => self::$key, 40 | 'libraries' => 'places', 41 | ]); 42 | return $scriptUrl; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /sources/widgets/views/MapInputWidget.php: -------------------------------------------------------------------------------- 1 | 'kolyunya-map-input-widget', 14 | 'style' => "width: $width; height: $height;", 15 | 'id' => $id, 16 | 'data' => 17 | [ 18 | 'latitude' => $latitude, 19 | 'longitude' => $longitude, 20 | 'zoom' => $zoom, 21 | 'pattern' => $pattern, 22 | 'map-type' => $mapType, 23 | 'animate-marker' => $animateMarker, 24 | 'align-map-center' => $alignMapCenter, 25 | 'enable-search-bar' => $enableSearchBar, 26 | ], 27 | ] 28 | ); 29 | 30 | // The actual hidden input 31 | echo Html::activeHiddenInput( 32 | $model, 33 | $attribute, 34 | [ 35 | 'class' => 'kolyunya-map-input-widget-input', 36 | ] 37 | ); 38 | 39 | // Search bar input 40 | echo Html::input( 41 | 'text', 42 | null, 43 | null, 44 | [ 45 | 'class' => 'kolyunya-map-input-widget-search-bar', 46 | ] 47 | ); 48 | 49 | // Map canvas 50 | echo Html::tag( 51 | 'div', 52 | '', 53 | [ 54 | 'class' => 'kolyunya-map-input-widget-canvas', 55 | ] 56 | ); 57 | 58 | // [END] - Map input widget container 59 | echo Html::endTag('div'); 60 | -------------------------------------------------------------------------------- /sources/widgets/MapInputWidget.php: -------------------------------------------------------------------------------- 1 | configureAssetBundle(); 39 | 40 | return $this->render( 41 | 'MapInputWidget', 42 | [ 43 | 'id' => $this->getId(), 44 | 'model' => $this->model, 45 | 'attribute' => $this->attribute, 46 | 'latitude' => $this->latitude, 47 | 'longitude' => $this->longitude, 48 | 'zoom' => $this->zoom, 49 | 'width' => $this->width, 50 | 'height' => $this->height, 51 | 'pattern' => $this->pattern, 52 | 'mapType' => $this->mapType, 53 | 'animateMarker' => $this->animateMarker, 54 | 'alignMapCenter' => $this->alignMapCenter, 55 | 'enableSearchBar' => $this->enableSearchBar, 56 | ] 57 | ); 58 | } 59 | 60 | private function configureAssetBundle() 61 | { 62 | \kolyunya\yii2\assets\MapInputAsset::$key = $this->key; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /sources/web/js/map-input-widget.min.js: -------------------------------------------------------------------------------- 1 | function MapInputWidgetManager(){const b=".kolyunya-map-input-widget";var a=this;var c=Array();var e=function(f){if(!$(f).data("initialized")){var g=new MapInputWidget(f);g.initialize();return g}return null};var d=function(g){var f=g.getId();c[f]=g};this.initializeWidgets=function(){$(b).each(function(f,g){var h=e(g);if(h){d(h)}})};this.getWidget=function(f){var g=c[f];return g}}function MapInputWidget(f){const p="input.kolyunya-map-input-widget-input";const b="input.kolyunya-map-input-widget-search-bar";const c="div.kolyunya-map-input-widget-canvas";var l=this;var j;var m;var d;var s;var r=function(){j=$(f).find(p).get(0);m=$(f).find(b).get(0);d=$(f).find(c).get(0)};var a=function(){s=new google.maps.Map(d,{mapTypeId:$(f).data("map-type"),center:q(),zoom:$(f).data("zoom"),styles:[{featureType:"poi",stylers:[{visibility:"off",},],},],mapTypeControlOptions:{mapTypeIds:[],},});google.maps.event.addListener(s,"click",function(u){l.setPosition({latitude:u.latLng.lat(),longitude:u.latLng.lng(),})})};var h=function(){var u=e();l.setPosition(u);$(f).data("initialized",true)};var t=function(){var u=$(f).data("enable-search-bar");var v=!u;$(m).prop("hidden",v);searchBarAutocomplete=new google.maps.places.Autocomplete(m);s.controls[google.maps.ControlPosition.TOP_LEFT].push(m);google.maps.event.addListener(searchBarAutocomplete,"place_changed",function(){var w=this.getPlace();var x=w.geometry;if(x){var y=x.location;l.setPosition(y)}})};var g=function(v){var w=i();var u=n(v);w=w.replace(/%latitude%/g,u.lat());w=w.replace(/%longitude%/g,u.lng());return w};var k=function(){var u=$(j).prop("value")!="";return u};var e=function(){var D;var z=i();var B=$(j).prop("value");if(B!==""){var x=z.indexOf("%latitude%");var A=z.indexOf("%longitude%");var v=x