Uso de Google Maps con CodeIgniter

Este pequeño tutorial busca demostrar lo sencillo que es integrar una librería que incorpora el API 3 de Google Maps con el Framework de desarrollo CodeIgniter. El tutorial fue probado utilizando una instalación Xampp con la versión 3.0 del Framework. Todos los recursos usados así como las fuentes originales de la librería vienen anexas al final de este tutorial.


¿Por dónde empezar?

Para comenzar el tutorial, se tomará por sentado que ya está instalado el servidor, si bien sea local o público, además de tener previamente instalado CodeIgniter y funcionando. Para mí caso la URL queda de la siguiente manera:

http://localhost/gmaps/

Una vez teniendo esto procedemos a descargar la librería que se encuentra dentro de los recursos al final de este tutorial. Una vez hecho, se procede a instalar la librería, en la carpeta de librerías del proyecto.

Con esto la librería queda instalada y es posible realizar todos lo que incorpora. En este tutorial veremos solo los más básicos y más comúnes.


Marcadores

Utilizando como base el controlador por default de CodeIgniter en el archivo Welcome.php se genera la siguiente URL

http://localhost/gmaps/index.php/welcome/marker

El código de la función para el Controlador es el siguiente:

public function marker(){
$this->load->library(‘googlemaps’);
 $config[‘center’] = ‘37.4419, -122.1419’;
$config[‘zoom’] = ‘auto’;
$this->googlemaps->initialize($config);
 $marker = array();
$marker[‘position’] = ‘37.429, -122.1419’;
$this->googlemaps->add_marker($marker);
$data[‘map’] = $this->googlemaps->create_map();
 $this->load->view(‘marker’, $data);
}

Para el caso de la Vista, se creó un archivo marker.php en el directorio de vistas y se usa el código siguiente:

<html>
<head><?php echo $map[‘js’]; ?></head>
<body><?php echo $map[‘html’]; ?></body>
</html>

El resultado final es el siguiente:


Direcciones

Utilizando como base el controlador por default de CodeIgniter en el archivo Welcome.php se genera la siguiente URL

http://localhost/gmaps/index.php/welcome/directions

El código de la función para el Controlador es el siguiente:

public function directions(){
$this->load->library(‘googlemaps’);
 $config[‘center’] = ‘37.4419, -122.1419’;
$config[‘zoom’] = ‘auto’;
$config[‘directions’] = TRUE;
$config[‘directionsStart’] = ‘empire state building’;
$config[‘directionsEnd’] = ‘statue of liberty’;
$config[‘directionsDivID’] = ‘directionsDiv’;
$this->googlemaps->initialize($config);
$data[‘map’] = $this->googlemaps->create_map();
 $this->load->view(‘directions’, $data);
}

Para el caso de la Vista, se creó un archivo directions.php en el directorio de vistas y se usa el código siguiente:

<html>
<head><?php echo $map[‘js’]; ?></head>
<body>
<?php echo $map[‘html’]; ?>
<div id=”directionsDiv”></div>
</body>
</html>

El resultado final es el siguiente:


Geolocalización

Utilizando como base el controlador por default de CodeIgniter en el archivo Welcome.php se genera la siguiente URL

http://localhost/gmaps/index.php/welcome/geolocation

El código de la función para el Controlador es el siguiente:

public function geolocation(){
$this->load->library(‘googlemaps’);
  $config = array();
$config[‘center’] = ‘auto’;
$config[‘onboundschanged’] = ‘if (!centreGot) {
var mapCentre = map.getCenter();
marker_0.setOptions({
position: new google.maps.LatLng(mapCentre.lat(), mapCentre.lng())
});
}
centreGot = true;’;
$this->googlemaps->initialize($config);

// set up the marker ready for positioning
// once we know the users location
$marker = array();
$this->googlemaps->add_marker($marker);
$data[‘map’] = $this->googlemaps->create_map();
  $this->load->view(‘geolocation’, $data);
}

Para el caso de la Vista, se creó un archivo geolocation.php en el directorio de vistas y se usa el código siguiente:

<html>
<head>
<script type=”text/javascript”>
var centreGot = false;
</script>
<?php echo $map[‘js’]; ?>
</head>
<body><?php echo $map[‘html’]; ?></body>
</html>

El resultado final es el siguiente:


Extras

Entre otras capacidades con las que cuenta la librería están:

Múltiples Marcadores

Dibujo de Polilíneas

Dibujo de Polígonos

Dibujo de Círculos

Dibujo de Rectángulos

Incorporación de Imágenes

Agrupación de Marcadores

Administrador de Dibujo

Estilizado del Mapa

Capa de Tráfico

Capa de Bicicletas

Capa de Panoramio

Street View

Capa KML

Integración con el API Places

Autocompletado de Lugares

Obtención de Coordenadas al dar Click

Agregar marcadores al dar Click

Pasar coordenadas a una base de datos

Múltiples mapas en una sola página


Conclusión

La librería tiene muchas capacidades para realizar una gran variedad de proyectos, su fácil instalación y manejo permiten extender en funcionalidades muy específicas, además que se pueden cambiar los parámetros de la misma para conseguir resultados más específicos.


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.