Google Maps Yii2 wrapper
Google Maps Yii2 wrapper, (*1)
Forked from [https://github.com/tugmaks/yii2-google-maps] and
* added Infowindow support.
* removed units parameters.
* added mapOptions parameters. (styles)
* added marker options. (icon)
* added mapInput widget, (*2)
Installation
The preferred way to install this extension is through composer., (*3)
Either run, (*4)
php composer.phar require --prefer-dist voime/yii2-google-maps "*"
or add, (*5)
"voime/yii2-google-maps": "*"
to the require section of your composer.json file., (*6)
MUST READ
Google Maps JavaScript API v3, (*7)
BASIC USAGE
Once the extension is installed, simply use it in your code by :, (*8)
use voime\GoogleMaps\Map;
echo Map::widget([
'zoom' => 16,
'center' => 'Red Square',
'width' => '700px',
'height' => '400px',
'mapType' => Map::MAP_TYPE_SATELLITE,
]);
There are two ways to set API KEY:, (*9)
Add to application parameters., (*10)
config/params.php
return [
.....
'GOOGLE_API_KEY' => 'VIza7yBgBzYEbKx09V566DhM8Ylc3NjWsJ0ps-2' // use your own api key
.....
]
Or pass it direct to widget., (*11)
use voime\GoogleMaps\Map;
echo Map::widget([
'apiKey'=> 'VIza7yBgBzYEbKx09V566DhM8Ylc3NjWsJ0ps-2',
'zoom' => 3,
'center' => [20, 40.555],
'width' => '700px',
'height' => '400px',
'mapType' => Map::MAP_TYPE_HYBRID,
]);
Parameters, (*12)
| Name |
Description |
| mapOptions |
array, not required, map object options |
| zoom |
integer, not required, default 16 |
| center |
array or string, required. If array lat and lng will be used, if string search query will be used. For example: php 'center'=>[23.091,100.412] or php 'center'=>'London, UK'
|
| width |
string, not required, default 600px. div wrapper width |
| height |
string, not required, default 600px. div wrapper height |
| mapType |
string, not required, default ROADMAP. Available types: MAP_TYPE_ROADMAP, MAP_TYPE_HYBRID, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN |
| markers |
array, not required. Markers that will be added to map |
MARKERS
One or more marker can be added to map. Just pass marker array to widget config, (*13)
use voime\GoogleMaps\Map;
echo Map::widget([
'mapOptions' => ['styles' => file_get_contents(Yii::getAlias('@webroot/res/map-styles.json'))],
'zoom' => 5,
'center' => [45, 45],
'markers' => [
['position' => 'Tartu', 'title' => 'marker title', 'content' => 'InfoWindow content', 'options' => ["icon" => "'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'"]],
['position' => [56,27]],
]
]);
````
MARKER OPTIONS
-----
The following options are allowed:
| Name | Description |
| ------------- | ------------- |
| position | string or array, required. If array lat and lng will be used, if string search query will be used. |
| title | string, not required. Rollover text |
| content | string, not required. Infowindow text |
| options | array, not required. Marker options |
MARKERS FIT BOUNDS
-----
Sometimes you need to show all markers on map, but do not know initial map center and zoom. In this case use widget like this
```php
use voime\GoogleMaps\Map;
echo Map::widget([
'width' => '50%',
'height' => '600px',
'mapType' => Map::MAP_TYPE_HYBRID,
'markers' => [
['position' => 'Belgrad'],
['position' => 'Zagreb'],
['position' => 'Skopje'],
['position' => 'Podgorica'],
['position' => 'Sarajevo'],
],
'markerFitBounds'=>true
]);
MapInput widget example. This need the following inputs
* address-input for address seach on map
* lat-input for latitude
* lng-input for longitude
* country-input for country name [optional], (*14)
```php
use voime\GoogleMaps\MapInput;, (*15)
= $form->field($model, 'address')->textInput(['id'=>'address-input']) ?>
'400px',
'zoom' => Yii::$app->params['map_zoom_one'],
'countryInput' => 'country-input',
'mapOptions' => [
'styles' => file_get_contents(Yii::getAlias('@webroot/res/map-styles.json')),
'maxZoom' => '15',
],
'markerOptions' => ['icon'=>"'" . Yii::getAlias('@web/res/img/marker.png') . "'"],
]);
?>
=$form->field($model, 'latitude')->hiddenInput(['id'=>'lat-input'])->label(false) ?>
=$form->field($model, 'longitude')->hiddenInput(['id'=>'lng-input'])->label(false) ?>
=$form->field($model, 'country')->hiddenInput(['id'=>'country-input'])->label(false) ?>
````, (*16)
Wallogit.com
