Cómo abrir nueva ventana al hacer click en tooltip infofob en googlemaps shortcode

hugoboltri · #1 (**permalink**) 19/02/2016, 10:03

Primero antes que nada gracias por la posible ayuda que me puedan brindar. Soy nuevo en WordPress, soy diseñador con algunos conocimientos de programación. Les paso la web en cuestión: http://lodeflorbarcelona.com/

El cliente me pide que al hacer click en el PIN (tooltip / infobox) dentro del mapa de google map shotecode ... tengo el logo personalizado sobre el mapa ... en cambi ode abrirme el infobox con algún texto me abra direcatmente un nuevo tab o ventana con la ubicación correspondiente dentro de google maps.

O a lo sumo que al hacer clic me abra el infobox y tendro tenga una leyenda que diga: "abrir en google maps" que sea un link activo y al hacer clic me abra la nueva venta con googlemaps y su ubicacion.

En un principio lo habia logrado agregando dentro del infobox los tag correspondiente con el lin .... .... que funcionaba correctamente en un un principio pero al día siguiente es como que se corrompia el contenido del infobox y deajaba de funcioanr el link.

Les agradecería me puedan dar una mano con este tema!
Muchas gracias. Y espero este foro me empieza a ser muy útil aprovechando la buena onda y muy buenos conocimientos de otros colegas.

Que tangan buen día y gracias!

carlillos · #2 (**permalink**) 19/02/2016, 12:29

No entendí muy bien cómo está integrado tu código pero un ejemplo podría ser así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Mapa</title>
<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#mapa {
    height: 100%;
}
</style>
</head>
<body>
<div id="mapa"></div>
<script>
 
function iniciar() {
    
    var ubicacion = {lat: 41.3781398, lng: 2.1663711999999578};
 
    var mapa = new google.maps.Map(document.getElementById('mapa'), {
        zoom: 18,
        center: ubicacion
    });
 
    var marcador = new google.maps.Marker({
        position: ubicacion,
        map: mapa,
        icon: 'http://www.marinomedia.com/lodeflor/wp-content/uploads/2015/10/logo_map.png'
    });
 
    google.maps.event.addListener(marcador, 'click', function() {
        window.open('https://www.google.es/maps/place/Restaurante+Lo+de+Flor/@41.3781543,2.1662756,15z/data=!4m2!3m1!1s0x0:0x3375c9bf1804ac13');
    });
  
}
 
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=iniciar"></script>
</body>
</html>

Saludos.

hugoboltri · #3 (**permalink**) 19/02/2016, 14:00

Muchas gracias por tu respuesta. Disculpa mi desconocimiento. Yo uso el wp-admin de wordpress. Donde tendría que agregar esas funciones? en la seccción CSS custom de wordpress? O tendría que editar alguna página en particular? Gracias por tu soporte!

carlillos · #4 (**permalink**) 19/02/2016, 15:02

Al parecer tu mapa se está generando con una función de jquery creada por tu plantilla que se llama "jQuery(...).fusion_maps", tendrías tú que analizar esa función para agregarle un evento 'click' a tu marcador.