Insertar #Mapa #Google en contenido y formulario de contacto en #Prestashop 1.6 by @WebEmpresa

Fuente: http://www.webempresa.com/blog/item/1492-insertar-mapas-google-en-contenido-y-formulario-de-contacto-en-prestashop-1-6.html

Los mapas son una parte importante en un sitio web que desea mostrar ubicaciones geográficas, el servicio de mapas google nos permite utilizar un código el cual podemos insertar en nuestros sitio web, este código es una porción de html con una etiqueta iframe y una serie de atributos adicionales.

En este artículo veremos cómo insertar el código html proporcionado por el servicio de google maps en nuestro sitio web que usa prestashop 1.6, veremos primero cómo realizar esto en un artículo a través de un editor de textos y luego veremos cómo insertar este código en la opción de contacto de prestashop.

Obteniendo código desde google maps

Primero debemos contar con el código a insertar, debemos buscar la ubicación geográfica en google maps

Debemos obtener el código desde la opción de compartir o incorporar mapas, en la opción de incorporar mapas, obtendremos el código con la etiqueta iframe, por ejemplo el siguiente código

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12150.410249667982!2d-3.7197912368977804!3d40.4176544821718!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd422997800a3c81%3A0xc436dec1618c2269!2sMadrid!5e0!3m2!1ses-419!2s!4v1404076754054

Hay que notar que hemos cambiado el width de 600 por 100% para que ocupe todo el ancho disponible y se comporte como responsive en caso se redimensione el navegador o se vea en dispositivos móviles

Insertando el código en artículos Prestashop

Será necesario habilitar la opción de Insertar Iframe desde de backend de presatshop, menú preferencias => general => Permite Iframe en los campos html

Luego desde preferencias => CMS => elegimos el artículo , luego en la opción de ver el código fuente de nuestro editor, insertamos el código iframe del mapa, si estamos usando el editor por defecto sería en la opción de herramientas => codigo fuente

Insertando el código en el formulario de contacto

En este caso, para insertar el código, puesto que no tenemos interfaz gráfica para esta pantalla, será necesario hacerlo en los archivos del theme que estemos usando, debemos buscar un archivo llamado contact-form.tpl, por ejemplo la ruta sería como : themes/TU_THEME_ACTUAL/contact-form.tpl, donde tenemos que reemplazar TU_THEME_ACTUAL

Al editar el archivo contact-form.tpl, podemos colocar el código al inicio o al final del archivo así como código html adicional

google maps – agrupar marcas (cluster) para mejorar el rendimiento con marcadores masivos – libreria MarkerClusterer by maestrosdelweb.com

Fuente: maestrosdelweb.com

MarkerCulterer agrupa los marcadores y muestra la cantidad de marcadores que hay en cierto segmento. En la documentación en el directorio llamado examples, muestra varios ejemplos de como utilizar esta librería.

Estos son los posibles colores que se pueden mostrar en el mapa que viene por defecto:

  • Azul 2-9
  • Amarillo 10-99
  • Rojo 100-999
  • Violeta 1,000-9,999
  • Violeta oscuro 10,000+

El comportamiento que trae por defecto la clase MarkerClusterer se puede modificar en el tercer parametro. Las posibles opciones son:

  • gridSize: Número entero. Valor por defecto 60
  • maxZoom: Número entero entre el 1 al 23. Indica hasta donde debe hacer el agrupamiento
  • zoomOnClick: Valor booleano para hacer “zoom” al pulsar en el marcador. true ofalse. Valor por defecto true
  • averageCenter: Centrar aproximádamente el marcador. true o false. Valor por defecto true
  • minimumClusterSize: Número mínimo para agrupar los marcadores. Por defecto 2

styles: Es un array que contiene uno o varios objetos de MarkerStyleOptions.
Posibles valores son:

  • url: La dirección de la imagen a mostrar
  • height: El alto de la imagen
  • width: El ancho de la imagen
  • anchor: Array con la posición x y y de los números en la imagen. Por defecto centrado
  • textColor: Color de los números. Por defecto black
  • textSize: Tamaño de los números. Por defecto 11
  • backgroundPosition: Posición del fondo

Es importante el orden en que se indican los objetos en el tercer parametro de la clase MarkerClusterer, las imágenes se van a mostrar conforme al orden de los valores numéricos indicados en los colores por defecto.

También los números de imágenes a colocar son importante, ya que si se coloca uno, esa es la imagen a mostrar en cada uno de los niveles indicados en los colores, si son dos la primera representa el primer valor numérico y la segunda del segundo al quinto, si se colocan tres, la primera representa el primer valor numérico, la segunda el segundo y la tercera del tercero al quinto y así sucesivamente.

Mostrar sólo un InfoWindow y cerrarlo automáticamente GMaps API v3 by Alex Franco

Fuente: http://jafrancov.com/2010/09/single-infowindow/

Si no tienes mucha experiencia o tienes dudas con respecto a algo que usemos en este post,puedes consultar los demás ejemplos que se han realizado anteriormente aquí.

En algunas ocasiones existe la necesidad de tener varios marcadores dentro de un mapa, cada uno de ellos con un Listener que está a la espera de que en cuanto hagamos ‘click’ en ellos, despliegue una InfoWindow que le hayamos asignado, pero, existe una desventaja (o ventaja depende del punto de vista) en la API v3 de GMaps, en comparación a la API v2 de GMaps, ésta es que al tener cada marcador con una ventana de información asignada, al momento de hacer click en un marcador se abre, pero si hacemos click en cualquier otro lugar del mapa (que no sea la ‘X’) no se cierra.

Lo que vamos a realizar es un cierre “automático”, esto quiere decir que al tener una InfoWindow abierta y hacer click en cualquier otro lado del mapa, se cierre en automático la ventana abierta en ese momento, de esta manera, siempre quedaría solamente una o ninguna InfoWindow en el mapa, librándonos de tener que estar cerrando manualmente cada una de las ventanas que aparezcan.

Ver Demo Single InfoWindow

En la v2 de la API de GMaps se hacía así:

1
2
3
4
5
// Listener para generar y gestionar el InfoWindow
// marker es un objeto tipo Marker
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("mensaje que quisieras que apareciera");
    });

Con eso era suficiente para que apareciera y desapareciera cuando perdiera el ‘foco‘, ahora para la v3 de la API de GMaps se crearon funciones para abrir (.open()) y cerrar (.close()) la InfoWindow, esto significo tener que especificar un evento para la apertura o cierre de la ventana. Esto no es problema, aunque la situación principal radica cuando tienes muchos marcadores, hacer esto para cada uno de ellos.

Solo es un poco de usar y re-usar funciones para facilitarnos la vida. Vamos a crear 2 variables globales una para el mapa y otra para una única instancia del InfoWindow, no es necesario crear más, con ella podremos crear tantas ventanas como nosotros queramos, por el momento no se les asignará el tipo de objeto, así que quedarán como null.

1
2
var map = null;
var infoWindow = null;

Vamos a crear dos funciones que son las que van a hacer el ejercicio de abrir y cerrar la ventana, para el ejercicio se requerirá que se declaren como sigue. La función para cerrar no recibirá ningún parámetro, simplemente ejecutará el proceso de cerrar del objeto InfoWindow. La función para abrir, recibirá 2 parámetros, el primero tendrá que ser un objeto tipo Marker y el segundo un String (cadena de caracteres); el marcador previamente debe ser creado con los parámetros mínimos para su uso, es decir su posición y en qué mapa se dibujará; el string será para asignarle el contenido específico del marcador en cuestión, igual si así lo deseas, puedes agregar contenido general.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function closeInfoWindow() {
    infoWindow.close();
}
function openInfoWindow(marker, content) {
    var markerLatLng = marker.getPosition();
    infoWindow.setContent([
        '<div style="text-align:center;">',
        'Las coordenadas del <b>',
        content,
        '</b> son:<br/>',
        markerLatLng.lat(),
        ', ',
        markerLatLng.lng(),
        '<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
        '<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
        '</div>'
    ].join(''));
    infoWindow.open(map, marker);
}

Antes de llegar al código completo, vamos a tener en cuenta una pequeña instrucción, un listener que se le va a agregar al mapa, que es el que va a hacer que al momento de hacer click en cualquier parte del mapa que no sea la el infoWindow, lo cierre, independientemente de cuál sea el que esté abierto.

1
2
3
google.maps.event.addListener(map, 'click', function(){
    closeInfoWindow();
});

Finalmente la función que se encargará de echar todo a andar, crear los marcadores y asignarles su Listener, indicar el objeto correspondiente a las variables del Map y del InfoWindow, todo este código ya lo hemos visto, así que todo el código quedaría así

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var map = null;
    var infoWindow = null;
    function closeInfoWindow() {
        infoWindow.close();
    }
    function openInfoWindow(marker, content) {
        var markerLatLng = marker.getPosition();
        infoWindow.setContent([
            '<div style="text-align:center;">',
            'Las coordenadas del <b>',
            content,
            '</b> son:<br/>',
            markerLatLng.lat(),
            ', ',
            markerLatLng.lng(),
            '<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
            '<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
            '</div>'
        ].join(''));
        infoWindow.open(map, marker);
    }
    function initialize() {
        var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map($("#map_canvas").get(0), myOptions);
        infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(map, 'click', function(){
            closeInfoWindow();
        });
        var marker1 = new google.maps.Marker({
            position: myLatlng,
            draggable: true,
            map: map
        });
        google.maps.event.addListener(marker1, 'click', function(){
            openInfoWindow(marker1, "Marcador 1");
        });
        var marker2 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(20.66057, -101.37325),
            draggable: true
        });
        google.maps.event.addListener(marker2, 'click', function() {
            openInfoWindow(marker2, "Marcador 2");
        });
        var marker3 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(20.67133, -101.32999),
            draggable: true
        });
        google.maps.event.addListener(marker3, 'click', function() {
            openInfoWindow(marker3, "Marcador 3");
        });
    }
    $(document).ready(function() {
        initialize();
    });

Ver Demo Single InfoWindow

Listo, ahora puedes traspolar este método a algo más dinámico como la consulta de APIs con Geolocalización por ejemplo… prueba, disfruta y practica… si tienes dudas, ya sabes dónde preguntarme :-D .