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 @@
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use common\widgets\PlacePicker;
/* @var $this yii\web\View */
/* @var $model common\models\Business */
......@@ -25,6 +26,8 @@ use yii\widgets\ActiveForm;
<?= $form->field($model, 'category_id')->dropDownList($categories, ['prompt' => ' ']) ?>
</div>
</div>
<div class="row">
<div class="col-md-4">
<?= $form->field($model, 'district_id')->dropDownList($districts, ['prompt' => ' ']) ?>
......@@ -37,15 +40,11 @@ use yii\widgets\ActiveForm;
<?= $form->field($model, 'domain_name')->textInput(['maxlength' => true]) ?>
</div>
</div>
<div class="row">
<div class="col-md-4">
<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
</div>
</div>
<div class="row">
<div class="col-md-4">
<?= $form->field($model, 'slug')
......@@ -56,7 +55,7 @@ use yii\widgets\ActiveForm;
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-6">
<?= $form->field($model, 'address')->textarea(['rows' => 6]) ?>
......@@ -125,28 +124,23 @@ use yii\widgets\ActiveForm;
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-8">
Address:
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<br>
<?= PlacePicker::widget(['model' => $model, 'name' => 'map', 'lat' => 'latitude', 'lon' => 'longitude']) ?>
</div>
</div>
<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">
<?= $form->field($model, 'latitude')->textInput(['maxlength' => true, 'class' => 'map-lat']) ?>
<?= $form->field($model, 'latitude')->textInput(['maxlength' => true, 'id' => 'latitude']) ?>
</div>
<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 class="row">
<div class="col-md-4">
<?= $form->field($model, 'status')->dropDownList($model::statuses()) ?>
......@@ -157,112 +151,108 @@ use yii\widgets\ActiveForm;
'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end();
$a = 1; ?>
<?php ActiveForm::end(); ?>
<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>
$(function(){
createmap();
function createmap(){
var lat = $('.map-lat').val(),
lng = $('.map-lon').val(),
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-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);
$('.map-lat').val(place.geometry.location.lat());
$('.map-lon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function (event) {
$('.map-lat').val(event.latLng.lat());
$('.map-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) {
$('.map-lat').val(event.latLng.lat());
$('.map-lon').val(event.latLng.lng());
infowindow.close();
});
google.maps.event.addListener(marker, 'dragend', function (event) {
$('.map-lat').val(event.latLng.lat());
$('.map-lon').val(event.latLng.lng());
infowindow.close();
});
$('.map-lat').bind('input', function () {
createmap();
infowindow.close();
});
$('.map-lon').bind('input', function () {
createmap();
infowindow.close();
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
}
});
// $(function () {
// createmap();
// function createmap() {
// var lat = $('#latitude').val(),
// lng = $('#longitude').val(),
// latlng = new google.maps.LatLng(lat, lng),
// image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-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);
// $('#latitude').val(place.geometry.location.lat());
// $('#longitude').val(place.geometry.location.lng());
// });
// google.maps.event.addListener(map, 'click', function (event) {
// $('#latitude').val(event.latLng.lat());
// $('#longitude').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) {
// $('#latitude').val(event.latLng.lat());
// $('#longitude').val(event.latLng.lng());
// infowindow.close();
// });
// google.maps.event.addListener(marker, 'dragend', function (event) {
// $('#latitude').val(event.latLng.lat());
// $('#longitude').val(event.latLng.lng());
// infowindow.close();
// });
// $('#latitude').bind('input', function () {
// createmap();
// infowindow.close();
// });
// $('#longitude').bind('input', function () {
// createmap();
// infowindow.close();
// });
// function moveMarker(placeName, latlng) {
// marker.setIcon(image);
// marker.setPosition(latlng);
// infowindow.setContent(placeName);
// //infowindow.open(map, marker);
// }
// }
// });
</script>
</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