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.

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

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'/>

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"
]);

Example with search

<input name='search' class='my-search-field'/>
<button class='my-button'>Search</button>

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'
    ]    
]);

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

$(document).on('mappicker-searchresults', function(evt, data){
    console.log(data.results);
    console.log(data.components);
})

nilsburg/yii2-gmapspicker-widget