created map widget(PlacePicker)

common/widgets/PlacePicker.php

+<?php
+namespace common\widgets;
+
+use yii\widgets\InputWidget;
+use yii\helpers\Html;
+
+
+class PlacePicker extends InputWidget
+{
+    public $lat;
+    public $lon;
+
+    public function init()
+    {
+        parent::init();
+        $this->registerScript();
+    }
+
+    public function run()
+    {
+
+        echo Html::tag('br');
+        echo Html::jsFile('http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js');
+        echo Html::jsFile('http://maps.google.com/maps/api/js?key=AIzaSyBcXUZ8SohRQzKnY4iYaa5_B2ix0b_OY9g&libraries=places&region=uk&language=en&sensor=true');
+        echo Html::textInput('Address', '',
+            ['id' => 'searchTextField', 'class' => 'form-control', 'style' => 'width:90%;']);
+        echo Html::tag('br');
+        echo Html::beginTag('div', [
+            'id' => 'map_canvas',
+            'style' => 'height: 450px;width: 100%;margin: 0.6em;box-shadow: 5px 5px 5px #888888;'
+        ]);
+        echo Html::endTag('div');
+
+    }
+
+    public function registerScript()
+    {
+        $this->getView()->registerJs("$(function () {
+        createmap();
+        function createmap() {
+            var lat = $($this->lat).val(),
+                lng = $($this->lon).val(),
+                latlng = new google.maps.LatLng(lat, lng),
+                image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png';
+            if (!lat && !lng) {
+                lat = 10.5113798;
+                lng = 76.1532094;
+            }
+            //zoomControl: true,
+            //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
+            var mapOptions = {
+                    center: new google.maps.LatLng(lat, lng),
+                    zoom: 13,
+                    mapTypeId: google.maps.MapTypeId.ROADMAP,
+                    panControl: true,
+                    panControlOptions: {
+                        position: google.maps.ControlPosition.TOP_RIGHT
+                    },
+                    zoomControl: true,
+                    zoomControlOptions: {
+                        style: google.maps.ZoomControlStyle.LARGE,
+                        position: google.maps.ControlPosition.TOP_left
+                    }
+                },
+                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
+                marker = new google.maps.Marker({
+                    position: latlng,
+                    map: map,
+                    draggable: true,
+                    icon: image
+                });
+            var input = document.getElementById('searchTextField');
+            var autocomplete = new google.maps.places.Autocomplete(input, {
+                types: [\"geocode\"]
+            });
+            autocomplete.bindTo('bounds', map);
+            var infowindow = new google.maps.InfoWindow();
+            google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
+                infowindow.close();
+                var place = autocomplete.getPlace();
+                if (place.geometry.viewport) {
+                    map.fitBounds(place.geometry.viewport);
+                } else {
+                    map.setCenter(place.geometry.location);
+                    map.setZoom(17);
+                }
+                moveMarker(place.name, place.geometry.location);
+                $($this->lat).val(place.geometry.location.lat());
+                $($this->lon).val(place.geometry.location.lng());
+            });
+            google.maps.event.addListener(map, 'click', function (event) {
+                $($this->lat).val(event.latLng.lat());
+                $($this->lon).val(event.latLng.lng());
+                infowindow.close();
+                var geocoder = new google.maps.Geocoder();
+                geocoder.geocode({
+                    \"latLng\": event.latLng
+                }, function (results, status) {
+                    console.log(results, status);
+                    if (status == google.maps.GeocoderStatus.OK) {
+                        console.log(results);
+                        var lat = results[0].geometry.location.lat(),
+                            lng = results[0].geometry.location.lng(),
+                            placeName = results[0].address_components[0].long_name,
+                            latlng = new google.maps.LatLng(lat, lng);
+                        moveMarker(placeName, latlng);
+                        $(\"#searchTextField\").val(results[0].formatted_address);
+                    }
+                });
+            });
+            google.maps.event.addListener(marker, 'click', function (event) {
+                $($this->lat).val(event.latLng.lat());
+                $($this->lon).val(event.latLng.lng());
+                infowindow.close();
+            });
+            google.maps.event.addListener(marker, 'dragend', function (event) {
+                $($this->lat).val(event.latLng.lat());
+                $($this->lon).val(event.latLng.lng());
+                infowindow.close();
+            });
+            $($this->lat).bind('input', function () {
+                createmap();
+                infowindow.close();
+            });
+            $($this->lon).bind('input', function () {
+                createmap();
+                infowindow.close();
+            });
+            function moveMarker(placeName, latlng) {
+                marker.setIcon(image);
+                marker.setPosition(latlng);
+                infowindow.setContent(placeName);
+                //infowindow.open(map, marker);
+            }
+        }
+    }); ");
+    }
+
+}
+
+?>
\ No newline at end of file