Foro phpBB 3.2: poner mapas de Google Maps

Los foros creados con phpBB 3.2 son unos foros muy completos con multitud de plugins y características, pero hay un plugin que he echado de menos cuando he instalado un foro phpBB, no es otro de google maps dentro de un post. Por ello hoy explicaré como se ponen Google Maps en un post de un foro phpBB

Como insertar mapas de google Maps en un foro phpBB 3.2

La versión usada para este tutorial de phpBB es la 3.2 de aunque probablemente sirva también para versiones anteriores.

Lo primero es insertar los js en la cabecera del foro, para ello abrimos el archivo: styles/prosilver/template/overall_header.html y le insertamos estas dos lineas

// Siendo API_KEY vuestra clave de api de google maps
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY" type="text/javascript"></script>
<script src="/assets/javascript/maps.js"></script>

una vez añadidos los scripts nos falta crear el archivo js maps.js, para ello creamos el archivo assets/javascript/maps.js con este contenido

function createMap(idMap, lat, lon, titulo,subtitulo) {
        map = new google.maps.Map(document.getElementById(idMap), {  center: {lat: lat, lng: lon},  zoom: 17, });
        var marker = new google.maps.Marker({  position: {lat:lat, lng: lon}, map: map,  title: titulo });
        marker.addListener('click', function() {  infowindow.open(map, marker); });
        var contenido = '<div style="color:black"><b>'+titulo+'</b><br/>'+subtitulo+'</div>';
        var infowindow = new google.maps.InfoWindow({  content:contenido,});
}

Ahora queda lo más fácil, hay que crear desdel el panel de control de Administración (PCA) un código BBCodes, para ello vamos al PCA->Mensajes->BBCodes->Añadir nuevo BBCode

En la caja de uso de BBCode pondremos:

[map={INTTEXT1},{INTTEXT2}]{SIMPLETEXT1}|{SIMPLETEXT2}[/map]

Con eso definiremos los tipos de datos que admitirá nuestro bbcode

En la caja de reemplazo HTML pondremos:

<div id="id_{INTTEXT1}{INTTEXT2}" style="width:640px;height:480px"></div>
<script>createMap("id_{INTTEXT1}{INTTEXT2}",{INTTEXT1},{INTTEXT2},'{SIMPLETEXT1}','{SIMPLETEXT2}');</script>

Con ello le diremos a phpBB que sustituya nuestro BBCode por ese html, que si os fijáis tiene un div para contener el mapa y un script para crear el mapa.

Marcamos Mostrar en mensajes y ya tenemos mapas!!!

Cómo se usan los mapas de google en un mensaje de phpBB

Para meter dentro de un mensaje del foro un mapa solo tendremos que editar un mensaje, poner el cursor donde queramos insertar el mapa y pulsar en el botón "map=" que nos habrá aparecido en el editor. Con esto nos saldrá:

[map=][/map]

Ahora tenemos que rellenarlo con nuestros datos del mapa: latitud, longitud, titulo y subtitulo. El titulo y el subtitulo será el texto que saldrá al pulsar en el POI del mapa. Deberemos meter algo como esto:

// Si os fijais, el titulo y el subtitulo van separados por "|"
[map=40.536623,-3.7862771]Local guay|Calle Bertinez 34, Madrid[/map]

Podéis ver un ejemplo de un mapa funcionando con este sistema en la web de adultos: foropoliamor.com

Esperamos os haya sido útil este tutorial sobre cómo poner mapas en un post de phpBB 3.2

Votos totales: 44