Google Maps Yii2 wrapper

Google Maps Yii2 wrapper

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

"tugmaks/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 tugmaks\GoogleMaps\Map;

echo Map::widget([
    'zoom' => 16,
    'center' => 'Red Square',
    'width' => 700,
    'height' => 400,
    '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 tugmaks\GoogleMaps\Map;

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

Parameters

MARKERS

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

use tugmaks\GoogleMaps\Map;

echo Map::widget([
    'zoom' => 5,
    'center' => [45, 45],
    'width' => 1100,
    'height' => 600,
    'mapType' => Map::MAP_TYPE_HYBRID,
    'markers' => [
        ['position' => 'Erevan'],
        ['position' => 'Moscow'],
        ['position' => 'Ankara'],
        ['position' => 'Kazan'],
        ['position' => 'Sofia'],
    ]
]);

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 tugmaks\GoogleMaps\Map;

echo Map::widget([
    'width' => 1100,
    'height' => 600,
    'mapType' => Map::MAP_TYPE_HYBRID,
    'markers' => [
        ['position' => 'Belgrad'],
        ['position' => 'Zagreb'],
        ['position' => 'Skopje'],
        ['position' => 'Podgorica'],
        ['position' => 'Sarajevo'],
    ],
    'markerFitBounds'=>true
]);