#Yii2 map input widget
##Description A Yii2 input widget which provides a user-friendly interface for selecting geographical coordinates via Google maps. Allows users to select geographical coordinates by clicking on an interative Google map embedded into you web-page.
The widget is composer-enabled. You can aquire the latest available version from the packagist repository.
##Demo A simple widget demo is available here. You may inspect the hidden input value via some web-developer tool (e.g. Firebug) to see how geographical coordinates are represented inside the widget.
##Usage examples
###Minimal example To reproduce the following minimal example you will need to acquire a Google maps browser key as described in Google maps developer's guide. The key may be stored as an application parameter for easy referencing or anywhere you like. All other widget parameters have some sensible default values and may not be configured.
echo $form->field($model,'coordinates')->widget
(
'kolyunya\yii2\widgets\MapInputWidget',
[
// Google maps browser key.
'key' => $key,
]
);###Extended example An exhaustive list of widget parameters (which are not derived from yii\widgets\InputWidget) available for configuration is described in the following example.
echo $form->field($model,'coordinates')->widget
(
'kolyunya\yii2\widgets\MapInputWidget',
[
// Google maps browser key.
'key' => $key,
// Initial map center latitude. Used only when the input has no value.
// Otherwise the input value latitude will be used as map center.
// Defaults to 0.
'latitude' => 42,
// Initial map center longitude. Used only when the input has no value.
// Otherwise the input value longitude will be used as map center.
// Defaults to 0.
'longitude' => 42,
// Initial map zoom.
// Defaults to 0.
'zoom' => 12,
// Map container width.
// Defaults to '100%'.
'width' => '420px',
// Map container height.
// Defaults to '300px'.
'height' => '420px',
// Coordinates representation pattern. Will be use to construct a value of an actual input.
// Will also be used to parse an input value to show the initial input value on the map.
// You can use two macro-variables: '%latitude%' and '%longitude%'.
// Defaults to '(%latitude%,%longitude%)'.
'pattern' => '[%longitude%-%latitude%]',
// Google map type. See official Google maps reference for details.
// Defaults to 'roadmap'
'mapType' => 'satellite',
// Marker animation behavior defines if a marker should be animated on position change.
// Defaults to false.
'animateMarker' => true,
// Map alignment behavior defines if a map should be centered when a marker is repositioned.
// Defaults to true.
'alignMapCenter' => false,
]
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent