panix/lib-google-maps

Google Maps API library for CORNER CMS

lib-google-maps

Google Maps API library for Yii2, _(*1)

, _(*2)

Introduction

Even though we already created an extension to display maps that are away from Google's policies and works with LeafLetJs library, we still received requests to have EGMap extension for Yii1 updated. So we thought that we should update this library and make it work with Yii2 if we were to update it. Thats the reason behind the creation of this extension., _(*3)

Nevertheless, it is important to note that we didn't have time (yet) to write any good documentation about it. We wanted to publish it already, just in case somebody working with Yii2 was missing the EGMap library for its projects, and wishes to update us with its tests and bug findings., _(*4)

The github repository will keep being updated, and documentation well written for its usage. So please, do not be impatient. If you do, any help will be highly appreciated., _(*5)

Installation

The preferred way to install this extension is through composer., _(*6)

Either run, _(*7)

php composer require "panix/lib-google-maps" "*"

or add, _(*8)

"panix/lib-google-maps" : "*"

to the require section of your application's composer.json file., _(*9)

Usage

Even though there will be plenty of examples on how to use it, here is one that will provide you with a glimpse of its usage:, _(*10)

Service

use panix\lib\google\maps\LatLng;
use panix\lib\google\maps\services\DirectionsWayPoint;
use panix\lib\google\maps\services\TravelMode;
use panix\lib\google\maps\overlays\PolylineOptions;
use panix\lib\google\maps\services\DirectionsRenderer;
use panix\lib\google\maps\services\DirectionsService;
use panix\lib\google\maps\overlays\InfoWindow;
use panix\lib\google\maps\overlays\Marker;
use panix\lib\google\maps\Map;
use panix\lib\google\maps\services\DirectionsRequest;
use panix\lib\google\maps\overlays\Polygon;
use panix\lib\google\maps\layers\BicyclingLayer;

$coord = new LatLng(['lat' => 39.720089311812094, 'lng' => 2.91165944519042]);
$map = new Map([
    'center' => $coord,
    'zoom' => 14,
]);

// lets use the directions renderer
$home = new LatLng(['lat' => 39.720991014764536, 'lng' => 2.911801719665541]);
$school = new LatLng(['lat' => 39.719456079114956, 'lng' => 2.8979293346405166]);
$santo_domingo = new LatLng(['lat' => 39.72118906848983, 'lng' => 2.907628202438368]);

// setup just one waypoint (Google allows a max of 8)
$waypoints = [
    new DirectionsWayPoint(['location' => $santo_domingo])
];

$directionsRequest = new DirectionsRequest([
    'origin' => $home,
    'destination' => $school,
    'waypoints' => $waypoints,
    'travelMode' => TravelMode::DRIVING
]);

// Lets configure the polyline that renders the direction
$polylineOptions = new PolylineOptions([
    'strokeColor' => '#FFAA00',
    'draggable' => true
]);

// Now the renderer
$directionsRenderer = new DirectionsRenderer([
    'map' => $map->getName(),
    'polylineOptions' => $polylineOptions
]);

// Finally the directions service
$directionsService = new DirectionsService([
    'directionsRenderer' => $directionsRenderer,
    'directionsRequest' => $directionsRequest
]);

// Thats it, append the resulting script to the map
$map->appendScript($directionsService->getJs());

// Lets add a marker now
$marker = new Marker([
    'position' => $coord,
    'title' => 'My Home Town',
]);

// Provide a shared InfoWindow to the marker
$marker->attachInfoWindow(
    new InfoWindow([
        'content' => '

This is my super cool content, (*11)

'
    ])
);

// Add marker to the map
$map->addOverlay($marker);

// Now lets write a polygon
$coords = [
    new LatLng(['lat' => 25.774252, 'lng' => -80.190262]),
    new LatLng(['lat' => 18.466465, 'lng' => -66.118292]),
    new LatLng(['lat' => 32.321384, 'lng' => -64.75737]),
    new LatLng(['lat' => 25.774252, 'lng' => -80.190262])
];

$polygon = new Polygon([
    'paths' => $coords
]);

// Add a shared info window
$polygon->attachInfoWindow(new InfoWindow([
        'content' => '

This is my super cool Polygon, (*12)

'
    ]));

// Add it now to the map
$map->addOverlay($polygon);


// Lets show the BicyclingLayer :)
$bikeLayer = new BicyclingLayer(['map' => $map->getName()]);

// Append its resulting script
$map->appendScript($bikeLayer->getJs());

// Display the map -finally :)
echo $map->display();

Client

use panix\lib\google\maps\services\DirectionsClient;

$direction = new DirectionsClient([
    'params' => [
        'language' => Yii::$app->language,
        'origin' => 'street from',
        'destination' => 'street to'
    ]
]);

$data = $direction->lookup(); //get data from google.maps API

This extension has also a plugin architecture that allow us to enhance it, so expect plugins to be developed in near future too., _(*13)

Configuration

To configure the Google Map key or other options like language, version, library, use the Asset Bundle customization feature., _(*14)

'components' => [
    'assetManager' => [
        'bundles' => [
            'panix\lib\google\maps\MapAsset' => [
                'options' => [
                    'key' => 'this_is_my_key',
                    'language' => 'id',
                    'version' => '3.1.18'
                ]
            ]
        ]
    ],
],

To get key, please visit https://code.google.com/apis/console/, _(*15)

Resources

• Google Maps API Reference
• GitHub
• Panix Packagist Profile