Skip to content

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 your web-page. Also allows users to type in a place name to search for it via Google Places API.

License

Notifications You must be signed in to change notification settings

Kolyunya/yii2-map-input-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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. Also allows users to type in a place name to search for it via Google Places API.

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

All widget parameters are optional, have some sensible default values and may not be configured.

echo $form->field($model, 'coordinates')->widget('kolyunya\yii2\widgets\MapInputWidget');

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,

        // A flag which defines if a search bar should be rendered over the map.
        'enableSearchBar' => true,

    ]
);

About

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 your web-page. Also allows users to type in a place name to search for it via Google Places API.

Resources

License

Stars

Watchers

Forks

Packages

No packages published