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 ¶
web development has never been so fun
www.2amigos.us
Cannot install through composer, please double check your json, thx.
Cannot install through composer, please double check your json, thx.
Ok now.
Ok now, can install "2amigos/yii2-google-places-library" : ""
Istead of :"2amigos/yii2-google-maps-library" : ""
@Scott_Huang
Sorry... I made a silly mistake (as I did also the google places library) packagist source
Thanks for reporting
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.
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 &&
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
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
@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;
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.