Skip to content

T
test-project
Commit f332e150 by Junaid Rahman pv
Options

created map widget(PlacePicker)

parent 4cef9ce0
Showing with 252 additions and 120 deletions
backend/modules/business/views/business/_form.php
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
use yii\helpers\Html; use yii\helpers\Html;
use yii\widgets\ActiveForm; use yii\widgets\ActiveForm;
use common\widgets\PlacePicker;
/* @var $this yii\web\View */ /* @var $this yii\web\View */
/* @var $model common\models\Business */ /* @var $model common\models\Business */
...@@ -25,6 +26,8 @@ use yii\widgets\ActiveForm; ...@@ -25,6 +26,8 @@ use yii\widgets\ActiveForm;
<?= $form->field($model, 'category_id')->dropDownList($categories, ['prompt' => ' ']) ?> <?= $form->field($model, 'category_id')->dropDownList($categories, ['prompt' => ' ']) ?>
</div> </div>
</div>
<div class="row">
<div class="col-md-4"> <div class="col-md-4">
<?= $form->field($model, 'district_id')->dropDownList($districts, ['prompt' => ' ']) ?> <?= $form->field($model, 'district_id')->dropDownList($districts, ['prompt' => ' ']) ?>
...@@ -37,15 +40,11 @@ use yii\widgets\ActiveForm; ...@@ -37,15 +40,11 @@ use yii\widgets\ActiveForm;
<?= $form->field($model, 'domain_name')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'domain_name')->textInput(['maxlength' => true]) ?>
</div> </div>
</div>
<div class="row">
<div class="col-md-4"> <div class="col-md-4">
<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
</div> </div>
</div>
<div class="row">
<div class="col-md-4"> <div class="col-md-4">
<?= $form->field($model, 'slug') <?= $form->field($model, 'slug')
...@@ -56,7 +55,7 @@ use yii\widgets\ActiveForm; ...@@ -56,7 +55,7 @@ use yii\widgets\ActiveForm;
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-6">
<?= $form->field($model, 'address')->textarea(['rows' => 6]) ?> <?= $form->field($model, 'address')->textarea(['rows' => 6]) ?>
...@@ -125,28 +124,23 @@ use yii\widgets\ActiveForm; ...@@ -125,28 +124,23 @@ use yii\widgets\ActiveForm;
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-8">
Address: <?= PlacePicker::widget(['model' => $model, 'name' => 'map', 'lat' => 'latitude', 'lon' => 'longitude']) ?>
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<br>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-10">
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>
</div>
</div>
<div class="row">
<div class="col-md-4"> <div class="col-md-4">
<?= $form->field($model, 'latitude')->textInput(['maxlength' => true, 'class' => 'map-lat']) ?> <?= $form->field($model, 'latitude')->textInput(['maxlength' => true, 'id' => 'latitude']) ?>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<?= $form->field($model, 'longitude')->textInput(['maxlength' => true, 'class' => 'map-lon']) ?> <?= $form->field($model, 'longitude')->textInput(['maxlength' => true, 'id' => 'longitude']) ?>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<?= $form->field($model, 'status')->dropDownList($model::statuses()) ?> <?= $form->field($model, 'status')->dropDownList($model::statuses()) ?>
...@@ -157,112 +151,108 @@ use yii\widgets\ActiveForm; ...@@ -157,112 +151,108 @@ use yii\widgets\ActiveForm;
'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div> </div>
<?php ActiveForm::end(); <?php ActiveForm::end(); ?>
$a = 1; ?>
<script
src="http://maps.google.com/maps/api/js?key=AIzaSyBcXUZ8SohRQzKnY4iYaa5_B2ix0b_OY9g&libraries=places&region=uk&language=en&sensor=true"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script> <script>
$(function(){ // $(function () {
createmap(); // createmap();
function createmap(){ // function createmap() {
var lat = $('.map-lat').val(), // var lat = $('#latitude').val(),
lng = $('.map-lon').val(), // lng = $('#longitude').val(),
latlng = new google.maps.LatLng(lat, lng), // latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; // image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
if (!lat && !lng) { // if (!lat && !lng) {
lat = 10.5113798; // lat = 10.5113798;
lng = 76.1532094; // lng = 76.1532094;
} // }
//zoomControl: true, // //zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE, // //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = { // var mapOptions = {
center: new google.maps.LatLng(lat, lng), // center: new google.maps.LatLng(lat, lng),
zoom: 13, // zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP, // mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true, // panControl: true,
panControlOptions: { // panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT // position: google.maps.ControlPosition.TOP_RIGHT
}, // },
zoomControl: true, // zoomControl: true,
zoomControlOptions: { // zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE, // style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left // position: google.maps.ControlPosition.TOP_left
} // }
}, // },
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), // map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({ // marker = new google.maps.Marker({
position: latlng, // position: latlng,
map: map, // map: map,
draggable: true, // draggable: true,
icon: image // icon: image
}); // });
var input = document.getElementById('searchTextField'); // var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, { // var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"] // types: ["geocode"]
}); // });
autocomplete.bindTo('bounds', map); // autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow(); // var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function (event) { // google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
infowindow.close(); // infowindow.close();
var place = autocomplete.getPlace(); // var place = autocomplete.getPlace();
if (place.geometry.viewport) { // if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport); // map.fitBounds(place.geometry.viewport);
} else { // } else {
map.setCenter(place.geometry.location); // map.setCenter(place.geometry.location);
map.setZoom(17); // map.setZoom(17);
} // }
moveMarker(place.name, place.geometry.location); // moveMarker(place.name, place.geometry.location);
$('.map-lat').val(place.geometry.location.lat()); // $('#latitude').val(place.geometry.location.lat());
$('.map-lon').val(place.geometry.location.lng()); // $('#longitude').val(place.geometry.location.lng());
}); // });
google.maps.event.addListener(map, 'click', function (event) { // google.maps.event.addListener(map, 'click', function (event) {
$('.map-lat').val(event.latLng.lat()); // $('#latitude').val(event.latLng.lat());
$('.map-lon').val(event.latLng.lng()); // $('#longitude').val(event.latLng.lng());
infowindow.close(); // infowindow.close();
var geocoder = new google.maps.Geocoder(); // var geocoder = new google.maps.Geocoder();
geocoder.geocode({ // geocoder.geocode({
"latLng": event.latLng // "latLng": event.latLng
}, function (results, status) { // }, function (results, status) {
console.log(results, status); // console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) { // if (status == google.maps.GeocoderStatus.OK) {
console.log(results); // console.log(results);
var lat = results[0].geometry.location.lat(), // var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(), // lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name, // placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng); // latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng); // moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address); // $("#searchTextField").val(results[0].formatted_address);
} // }
}); // });
}); // });
google.maps.event.addListener(marker, 'click', function (event) { // google.maps.event.addListener(marker, 'click', function (event) {
$('.map-lat').val(event.latLng.lat()); // $('#latitude').val(event.latLng.lat());
$('.map-lon').val(event.latLng.lng()); // $('#longitude').val(event.latLng.lng());
infowindow.close(); // infowindow.close();
}); // });
google.maps.event.addListener(marker, 'dragend', function (event) { // google.maps.event.addListener(marker, 'dragend', function (event) {
$('.map-lat').val(event.latLng.lat()); // $('#latitude').val(event.latLng.lat());
$('.map-lon').val(event.latLng.lng()); // $('#longitude').val(event.latLng.lng());
infowindow.close(); // infowindow.close();
}); // });
$('.map-lat').bind('input', function () { // $('#latitude').bind('input', function () {
createmap(); // createmap();
infowindow.close(); // infowindow.close();
}); // });
$('.map-lon').bind('input', function () { // $('#longitude').bind('input', function () {
createmap(); // createmap();
infowindow.close(); // infowindow.close();
}); // });
function moveMarker(placeName, latlng) { // function moveMarker(placeName, latlng) {
marker.setIcon(image); // marker.setIcon(image);
marker.setPosition(latlng); // marker.setPosition(latlng);
infowindow.setContent(placeName); // infowindow.setContent(placeName);
//infowindow.open(map, marker); // //infowindow.open(map, marker);
} // }
} // }
}); // });
</script> </script>
</div> </div>
common/widgets/PlacePicker.php 0 → 100644
<?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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment