proximitymad/yii2-mapspicker-widget

A widget for the Yii2 framework to render a Map with Google Maps and allow the user to pick a location on the map and get the coordinates.

yii2-mapspicker-widget

A widget for the Yii2 framework to render a Map with Google Maps and allow the user to pick a location on the map and get the coordinates., _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

php composer.phar require --prefer-dist proximitymad/yii2-mapspicker-widget "1.0.*"

or add, _(*4)

"proximitymad/yii2-mapspicker-widget": "1.0.*"

to the require section of your composer.json file., _(*5)

Usage

Once the extension is installed, simply use it in your code by :, _(*6)

echo \app\components\widgets\Maps\MapPicker::widget([
    'apiKey'=>'gmaps-api-key' //required,
    'search'=>'Madrid, Spain' //required
]);

Required parameters

• apiKey: The google maps api key, you can get it following the instructions here (only required when loadMapApi is set to true).
• search: The search string to start the map with, for example Madrid, Spain. Can be coordinates as well ( 40.4525784,-3.6813066 ).

Optional parameters

• loadMapApi: If set to false, it will not load the Google Maps JS API in case you are already including it default: true.
• mapId: The ID of the map, if it is left empty it will be autogenerated.
• width: The width of the map default: 100.
• height: The height of the map default: 100.
• latFieldClass: The DOM element class which contains the input field for latitude default: field-lat.
• lngFieldClass: The DOM element class which contains the input field for longitude default: field-lng.
• errorClass: The DOM element class which contains the error message in case no results are found default: search-error.
• errorMsg: The error message to display in case no results are found default: No results found.
• searchField:
  • inputClass: The input field with the search string default: search-field.
  • buttonClass: The button to start the search default: btn-search.
• mapOptions:
  • zoom: the zoom to start the map with default: 16.
  • streetViewControl: Enables or disables street view control or no default: false
• show: Set to false if you don't want the widget to autoload.
• scriptsPosition: The position where the scripts should load. See yii\web\View constants for positions.

Examples

<input name='lat' class='my-lat-field'/>
<input name='lng' class='my-lng-field'/>

```php echo \app\components\widgets\Maps\MapPicker::widget([ 'apiKey'=>"my-api-key", 'width'=>'100%', 'height'=>300, 'search'=>"Barcelona, Spain", 'errorMsg'=>"Ey, your search didn't retrieve any results", 'latFieldClass'=>"my-lat-field" 'lngFieldClass'=>"my-lng-field" ]);, <sub>(*7)</sub>

### Example with search ###
```html
<input name='search' class='my-search-field'/>
<button class='my-button'>Search</button>

```php echo \app\components\widgets\Maps\MapPicker::widget([ 'apiKey'=>"my-api-key", 'width'=>'100%', 'height'=>300, 'search'=>"Barcelona, Spain", 'errorMsg'=>"Ey, your search didn't retrieve any results", 'searchField'=>[ 'inputClass'=>'my-search-field', 'buttonClass'=>'my-button' ] ]);, <sub>(*8)</sub>

## Events ##
After a search or after picking a place on the map an event is triggered with the search results, the event is __mappicker-searchresults__. The results contains all the results and the components (country, state, province and locality).
#### Example ####
```js
$(document).on('mappicker-searchresults', function(evt, data){
    console.log(data.results);
    console.log(data.components);
})