banner-integrar-google-maps-en-laravel

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.

gmaps

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

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