globaloxs/yii2-google-maps

Google Maps Yii2 with clusterer wrapper

dev-master 2018-03-12 14:10 UTC

Requires

• bower-asset/google-maps-js-marker-clusterer: *
• yiisoft/yii2: *

MIT

• Miguel Bracamontes

• extension
• google
• maps
• yii2
• clusterer

README

Google Maps Yii2 wrapper

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

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

    echo Map::widget([
        'zoom' => $zoom,
        'center' => $center,
        'width' => 850,
        'height' => 600,
        'mapType' => Map::MAP_TYPE_ROADMAP,
        'markers' => $markers,
        'onClickMarker'=> new \yii\web\JsExpression('function(id, marker,map, infowindow){

        }'),
        'onZoomChanged' => new \yii\web\JsExpression('function() {

        }'),
        'onDragEnd' => new \yii\web\JsExpression('function() {

        }'),
        'markerClustererOptions'=> [
            'imagePath'=> \yii\helpers\Url::to('@web/imgs/circulo-mc')]
        ]);

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 globaloxs\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 globaloxs\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 globaloxs\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
]);