Skip to content

T
test-project
Commit aa00fd2b by Junaid Rahman pv
Options

modified map widget(PlacePicker) in to a advanced widget

parent 233d0921
Showing with 172 additions and 109 deletions
backend/modules/business/views/business/_form.php
...@@ -126,7 +126,33 @@ use common\widgets\PlacePicker\PlacePicker; ...@@ -126,7 +126,33 @@ use common\widgets\PlacePicker\PlacePicker;
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<?= PlacePicker::widget(['model' => $model, 'name' => 'map', 'lat' => 'latitude', 'lon' => 'longitude']) ?> <?= PlacePicker::widget([
'model' => $model,
'name' => 'map',
'latitudeFieldId' => 'latitude',
'longitudeFieldId' => 'longitude'
]) ?>
</div>
</div>
<div class="row">
<div class="col-md-4">
<?= $form->field($model, 'latitude')->textInput(['maxlength' => true, 'id' => 'latitude']) ?>
</div>
<div class="col-md-4">
<?= $form->field($model, 'longitude')->textInput(['maxlength' => true, 'id' => 'longitude']) ?>
</div>
</div>
<div class="row">
<div class="col-md-8">
<?= PlacePicker::widget([
'model' => $model,
'name' => 'map',
'latitudeFieldId' => 'latitude',
'longitudeFieldId' => 'longitude'
]) ?>
</div> </div>
</div> </div>
......
common/widgets/PlacePicker/MapAsset.php
...@@ -34,6 +34,7 @@ class MapAsset extends AssetBundle ...@@ -34,6 +34,7 @@ class MapAsset extends AssetBundle
$this->sourcePath = __DIR__."/assets"; $this->sourcePath = __DIR__."/assets";
parent::init(); parent::init();
$this->js = [ $this->js = [
'js/map-kit.js',
'https://maps.googleapis.com/maps/api/js?key=AIzaSyBcXUZ8SohRQzKnY4iYaa5_B2ix0b_OY9g&libraries=places', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBcXUZ8SohRQzKnY4iYaa5_B2ix0b_OY9g&libraries=places',
]; ];
......
common/widgets/PlacePicker/PlacePicker.php
...@@ -3,137 +3,52 @@ namespace common\widgets\PlacePicker; ...@@ -3,137 +3,52 @@ namespace common\widgets\PlacePicker;
use yii\widgets\InputWidget; use yii\widgets\InputWidget;
use yii\helpers\Html; use yii\helpers\Html;
use yii\helpers\Json;
use yii\helpers\ArrayHelper;
class PlacePicker extends InputWidget class PlacePicker extends InputWidget
{ {
public $lat; public $latitudeFieldId;
public $lon; public $longitudeFieldId;
public $name;
public $clientOptions = [];
public $randNumber;
public function init() public function init()
{ {
MapAsset::register($this->view); MapAsset::register($this->view);
parent::init(); parent::init();
$this->registerScript(); $randNumber = rand(1,100);
$this->clientOptions = ArrayHelper::merge(
[
'latitudeFieldId' => $this->latitudeFieldId,
'longitudeFieldId' => $this->longitudeFieldId,
'mapName' => $this->name,
'searchTextField' => 'searchTextField'.$randNumber
],
$this->clientOptions
);
$options = Json::encode($this->clientOptions);
$this->getView()->registerJs("jQuery('#{$this->getId()}').yiiMapKit({$options});");
} }
public function run() public function run()
{ {
echo Html::tag('br'); echo Html::tag('br');
echo Html::textInput('Address', '', echo Html::textInput('Address', '',
['id' => 'searchTextField', 'class' => 'form-control', 'style' => 'width:90%;']); ['id' => $this->clientOptions['searchTextField'], 'class' => 'form-control', 'style' => 'width:90%;']);
echo Html::tag('br'); echo Html::tag('br');
echo Html::beginTag('div', [ echo Html::beginTag('div', [
'id' => 'map_canvas', 'id' => $this->clientOptions['mapName'],
'style' => 'height: 450px;width: 100%;margin: 0.6em;box-shadow: 5px 5px 5px #888888;' 'style' => 'height: 450px;width: 100%;margin: 0.6em;box-shadow: 5px 5px 5px #888888;'
]); ]);
echo Html::endTag('div'); 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);
}
}
}); ");
}
} }
......
common/widgets/PlacePicker/assets/js/map-kit.js 0 → 100644
/**
* Created by Junaid Rahman on 07-09-2016.
*/
(function ($) {
jQuery.fn.yiiMapKit = function (options) {
var methods = {
init: function () {
var inputLatitude = options.latitudeFieldId;
var inputLongitude = options.longitudeFieldId;
var map_canvas = options.mapName;
var searchTextField = options.searchTextField;
var lat = $('#'+inputLatitude).val(),
lng = $('#'+inputLongitude).val(),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png';
if (!lat && !lng) {
lat = 10.5113798;
lng = 76.1532094;
}
//var lat contains the value enterd in the latitude input field
//var lng contains the value enterd in the longitude input field
var latlng = new google.maps.LatLng(lat, lng);
//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);
$('#'+inputLatitude).val(place.geometry.location.lat());
$('#'+inputLongitude).val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function (event) {
$('#'+inputLatitude).val(event.latLng.lat());
$('#'+inputLongitude).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) {
$('#'+inputLatitude).val(event.latLng.lat());
$('#'+inputLongitude).val(event.latLng.lng());
infowindow.close();
});
google.maps.event.addListener(marker, 'dragend', function (event) {
$('#'+inputLatitude).val(event.latLng.lat());
$('#'+inputLongitude).val(event.latLng.lng());
infowindow.close();
});
$('#'+inputLatitude).bind('input', function () {
methods.init();
infowindow.close();
});
$('#'+inputLongitude).bind('input', function () {
methods.init();
infowindow.close();
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
}
};
methods.init.apply(this);
return this;
};
})(jQuery);
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