Google maps es reconocido a nivel mundial, es por ello que en algún proyecto va a ser necesario generar y/o añadir esos mapas que hoy en día son tan útiles. Esta función la podemos lograr fácilmente en Laravel, anteriormente fue explicado en Integrar Google Maps en Laravel 5 con el componente Phpgmaps (Pero el plugin fue descontinuado). Ahora lo podemos seguir realizando con el plugin genealabs/phpgmaps como explico a continuación:
Es importante resaltar que este post y este paquete está destinados a generar un mapa con la ubicación actual del usuario. Si lo que se quiere es mostrar un punto estático en el mapa se tendría que realizar algunas modificaciones o pegar el mapa manualmente.
Comencemos, lo primero que debemos hacer es añadir el require en nuestro archivo composer.json:
"genealabs/phpgmaps": "~0.3.0"Seguidamente en la consola, escribimos el comando para actualizar y descargar los complementos:
composer update
Luego de ser descargado, agregamos el provider en el archivo config/app.php, dentro del arreglo de providers, quedaría así:
GeneaLabs\Phpgmaps\PhpgmapsServiceProvider::class,
En el mismo archivo agregamos el alias, dentro del arreglo de aliases, quedaría así:
'Gmaps' => GeneaLabs\Phpgmaps\Facades\PhpgmapsFacade::class,
Ahora bien, creamos un controlador para comenzar a usar nuestro plugin, para ello vamos a dirigirnos a la consola y ejecutar el siguiente comando:
php artisan make:controller GmapsController
Bien, hay que recordar siempre agregar la ruta a nuestro controlador en el archivo app/Http/routes.php, de la siguiente manera:
Route::get('/gmaps', ['as ' => 'gmaps', 'uses' => 'GmapsController@index']);
Excelente, ahora podemos para hacer el llamado del plugin, su respectiva configuración y regresar una vista que llamaremos gmaps, modificando la función index de nuestro controlador, el cual quedaría de la siguiente manera:
public function index()
{
//configuaración
$config = array();
$config['center'] = 'auto';
$config['map_width'] = 400;
$config['map_height'] = 400;
$config['zoom'] = 15;
$config['onboundschanged'] = 'if (!centreGot) {
var mapCentre = map.getCenter();
marker_0.setOptions({
position: new google.maps.LatLng(mapCentre.lat(), mapCentre.lng())
});
}
centreGot = true;';
\Gmaps::initialize($config);
// Colocar el marcador
// Una vez se conozca la posición del usuario
$marker = array();
\Gmaps::add_marker($marker);
$map = \Gmaps::create_map();
//Devolver vista con datos del mapa
return view('gmaps', compact('map'));
}
Creamos la vista en la ruta resources/views/ la cual llamaremos gmaps.blade.php y la modificamos con el siguiente código:
<html>
<head>
<script type="text/javascript">var centreGot = false;</script>{!!$map['js']!!}
</head>
<body>
{!!$map['html']!!}
</body>
</html>
Listo, puedes dirigirte a la ruta_de_tu_proyecto/gmaps para visualizar el mapa de tu locación.
Espero sea de su agrado y además les sea de utilidad. Recuerda compartir está y demás lecciones en tus redes sociales. Comentarios y/o dudas serán bien recibidas.
Artículos relacionados
- Obtener videos de Youtube – Laravel 5
- Autenticación en Laravel 5 con Eloquent OAuth y Facebook
- Cómo crear rutas en Laravel 5.*
- Sistema de autenticación en Laravel 5.1
- jQuery y Laravel: Mensajes de Alert con Javascript y Bootstrap
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Cómo instalar filp/whoops en Laravel 5.* Lección siguiente Como integrar plantilla AdminLTE en Laravel