Yii 2.0: yii2-google-maps-library

Google Maps API library for Yii2
11 followers

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.

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.

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.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require "2amigos/yii2-google-maps-library" "*"

or add

"2amigos/yii2-google-maps-library" : "*"

to the require section of your application's composer.json file.

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:

use dosamigos\google\maps\LatLng;
use dosamigos\google\maps\services\DirectionsWayPoint;
use dosamigos\google\maps\services\TravelMode;
use dosamigos\google\maps\overlays\PolylineOptions;
use dosamigos\google\maps\services\DirectionsRenderer;
use dosamigos\google\maps\services\DirectionsService;
use dosamigos\google\maps\overlays\InfoWindow;
use dosamigos\google\maps\overlays\Marker;
use dosamigos\google\maps\Map;
use dosamigos\google\maps\services\DirectionsRequest;
use dosamigos\google\maps\overlays\Polygon;
use dosamigos\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' => '<p>This is my super cool content</p>'
    ])
);
 
// 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' => '<p>This is my super cool Polygon</p>'
    ]));
 
// 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();

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

Resources

2amigOS!
web development has never been so fun
www.2amigos.us

Total 8 comments

#19740 report it
alexmetola at 2016/01/14 06:53am
@nirmalroka resonse to "How to add multiple markers?"

Hi nirmalroka, this is simple:

$coord = new LatLng(['lat' =>40.4167754,'lng' =>-3.7037901999999576]);
    $map = new Map(['center' => $coord,
                    'zoom' => 5,
                    'scrollwheel'=> false ,
                    'width' => 'auto',
                    'height' => 280,]);
 
    foreach($ResultSearch as $row):
        $cont++;
        $coord = new LatLng(['lat' => $row->latitude_gps,
                             'lng' => $row->length_gps]);   
 
        $marker = new Marker(['position' => $coord,
                              'title' => $row->title_gps,]);
        $marker->attachInfoWindow(new InfoWindow(['content' => '<p>'.$row->content_gps.'</p>']));
        $map->addOverlay($marker);
 
    endforeach;
#19602 report it
nirmalroka at 2015/09/29 09:00am
How to add multiple markers?

I didn't find any clear documentation or example to add multiple markers. I don't want to use too much features but I want to list bunch of location on the marker which are nearby location, i do have lat and lng of near by location from database and I want to pupulate them to the map

#19356 report it
Wade Shuler at 2015/05/29 03:45pm
Does this have any support for loading via JSONP?

Does this extension have any support for loading data from JSONP to populate the map.

Example: Google Docs: Loading JSON From The Same Domain

#19128 report it
dannythebestguy at 2015/03/25 03:43pm
Throwing Error

I get this error

"address" or "components" must be set for the request. Both cannot be null

This is thrown in vendor/2amigos/yii2-google-maps-library/services/GeocodingClient.php - Line 75

if ($this->params['address'] == null || $this->params['components'] == null) { throw new InvalidConfigException('"address" or "components" must be set for the request. Both cannot be null'); }

I cud fix it by changing || to &&

#19026 report it
skworden at 2015/02/26 11:56am
How do you set icon size and use geolocation like in yii 1 egmaps?

Is the functionality for geolocation (instead of lat and lng) and setting marker sizes/options still available that was in your egmaps?

i.e. in egmaps we could do the following

$icon = new EGMapMarkerImage($img);
$icon->setSize(36, 52);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);

Can we do something like the above in the new one for Yii2, if so, could you please provide an example. I'd really like to be able to set the marker size, anchor, and orgin.

Also, we used to be able to use geolocation and use it to center the map. It would get lat / lng from an address.

i.e.

$gMap = new EGMap();
$geocoded_address = new EGMapGeocodedAddress('123 Main St, Dallas, TX, 12345');                
$geocoded_address->geocode($gMap->getGMapClient());
// Center the map on geocoded address
$gMap->setCenter($geocoded_address->getLat(), $geocoded_address->getLng());
// Add marker on geocoded address
$marker = new EGMapMarker(
  $geocoded_address->getLat(),
  $geocoded_address->getLng(),
  array(
    'title' =>'Title',
    'icon'=>$icon
  )
);
$gMap->addMarker($marker);

Can we still do the above in the new one as well, if so could you please provide and example for this too. I'd like to also be able to set the center lat/lng from geolocation as well as put a marker from an address.

#18214 report it
Antonio Ramirez at 2014/09/27 04:16pm
@Scott_Huang

Sorry... I made a silly mistake (as I did also the google places library) packagist source

Thanks for reporting

#18207 report it
Scott_Huang at 2014/09/25 11:18pm
Ok now.

Ok now, can install "2amigos/yii2-google-places-library" : "" Istead of :"2amigos/yii2-google-maps-library" : ""

#18206 report it
Scott_Huang at 2014/09/25 08:41pm
Cannot install through composer, please double check your json, thx.

Cannot install through composer, please double check your json, thx.

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet