Tutorial de polilineas en Google maps: PHP y PEAR

Hoy vamos a hablar de cómo hacer un mapa de google maps con polilíneas. Para ello usaremos PHP con PEAR para leer las coordenadas de disco y pintar el html. 

Datos con coordenadas a pintar en el mapa

Tenemos que crear un archivo en disco con las coordenadas, una por linea y separada la latitud de la longitur por el caracter pipe "|"

Por ejemplo:

40.400193|-3.750519|Inicio
40.399977|-3.752066|Segundo
40.400306|-3.754684|Tercero
40.398139|-3.756714|Cuarto
40.393151|-3.759873|Quinto
40.382781|-3.763986|Sexto

Template para pintar el mapa

Es necesario una template para inyectar las coordenadas de forma dinámica y que el navegador pinte las líneas del polígono

// Cargamos el js de la api de google
<script src="http://maps.google.com/maps?file=api" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function createMap() {
        if (GBrowserIsCompatible()) {
                // Creamos el mapa
                var map = new GMap2(document.getElementById("map"));    
                // Centramos el mapa en las variables {lat_orig},{lon_orig}
                map.setCenter(new GLatLng({lat_orig},{lon_orig}),17);
                <!-- BEGIN coords -->
                // creamos los puntos a unir
                var coord_{num} = new GLatLng({lat},{lon});
                <!-- END coords -->
                // Unimos los puntos
                var polyline = new GPolyline([{puntos}], "#0000dd", 6, 0.4);
                map.addOverlay(polyline);
        }
}
// Al cargar la pagina llamamos a nuestra funcion que pinta el mapa
window.onload=createMap
//]]>
</script>
<div id="map" style="width:{WIDTH}px;height:{HEIGHT}px"></div>

PHP que carga plantilla e inyecta las coordenadas

<?
// DIR_PEAR sera la ruta donde tengamos la libreia de PEAR
require_once DIR_PEAR."IT.php";

// Por get admitimos el nombre del archivo de datos (para que podamos cargar distintas coords)
$datos = $_GET['c'];

// Recibimos por get el Width del mapa
$width = $_GET['w'];

// Recibimos por get el height del mapa
$height= $_GET['h'];

// Leemos archivo de nuestros datos (en DIR_DATOS_MAPAS tenemos que definir la ruta de los datos)
$coords = file(DIR_DATOS_MAPAS.$datos);

// Inicializamos el objeto template con la ruta de nuestra constante DIR_TEMPLATES
$tpl = new HTML_Template_IT(DIR_TEMPLATES);

// Cargamos la template
$tpl->loadTemplatefile('mapa.tpl', true, true);

// Ponemos en la template el ancho y el alto del mapa
$tpl->setVariable("WIDTH",$width);
$tpl->setVariable("HEIGHT",$height);

$num=0;$s_coords = array();
// Recorremos las coordenadas
for ($i=0;$i<count($coords);$i++){
        $linea = trim($coords[$i]);
        if ($linea){
                // Las coordenadas estan separadas por |
                $a_linea = explode("|",$linea);
                // Centramos en la primera coordenada
                if ($i==0){
                        $tpl->setVariable("lat_orig",$a_linea[0]);
                        $tpl->setVariable("lon_orig",$a_linea[1]);
                }
                $tpl->setCurrentBlock("coords");
                $tpl->setVariable("lat",$a_linea[0]);
                $tpl->setVariable("lon",$a_linea[1]);
                $tpl->setVariable("num",$num);
                // Guardamos en array los nombres de las variables javascript que tienen las coordenadas para luego ponerlo en el polyline
                $s_coords[] = "coord_".$num;
                $num++;
                $tpl->parseCurrentBlock();
        }       
}               
$tpl->setCurrentBlock();
$tpl->setVariable("puntos",implode(",",$s_coords));
$tpl->show();   

?>