README

Google Maps Yii2 wrapper

Forked from [https://github.com/voime/yii2-google-maps] and

added Localization support.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist KBIM-dev/yii2-google-maps "*"

or add

"KBIM-dev/yii2-google-maps": "*"

to the require section of your composer.json file.

MUST READ

Google Maps JavaScript API v3

BASIC USAGE

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

use KBIM-dev\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:

Add to application parameters.

config/params.php

return [
.....
'GOOGLE_API_KEY' => 'VIza7yBgBzYEbKx09V566DhM8Ylc3NjWsJ0ps-2' // use your own api key
.....
]

Or pass it direct to widget.

use KBIM-dev\GoogleMaps\Map;

echo Map::widget([
    'apiKey'=> 'VIza7yBgBzYEbKx09V566DhM8Ylc3NjWsJ0ps-2',
    'zoom' => 3,
    'center' => [20, 40.555],
    'width' => '700px',
    'height' => '400px',
    'mapType' => Map::MAP_TYPE_HYBRID,
]);

Parameters

MARKERS

One or more marker can be added to map. Just pass marker array to widget config

use KBIM-dev\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:

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

use KBIM-dev\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

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]

use KBIM-dev\GoogleMaps\MapInput;

<?= $form->field($model, 'address')->textInput(['id'=>'address-input']) ?>

<?php
echo MapInput::widget([
    'height' => '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) ?>

kbim-dev / yii2-google-maps

Maintainers

Details