Google Maps Marker como un enlace

Tengo el siguiente código, pero no está funcionando, el enlace solo se muestra en el último punto (Argentina), ¿algo de ayuda?Google Maps Marker como un enlace

<div id="map" style="width: 980px; height: 420px;margin:10px 0px 30px;"></div> 

<script type="text/javascript"> 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: new google.maps.LatLng(0,0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var usa = new google.maps.LatLng(37.09024, -95.712891); 
    var brasil = new google.maps.LatLng(-14.235004, -51.92528); 
    var argentina = new google.maps.LatLng(-38.416097, -63.616672); 

    var marker = new google.maps.Marker({ 
     position: usa, 
     url: '/destinos/exibir/pais_id/3', 
     title: 'Estados Unidos', 
     map: map 
    }); 

    var marker = new google.maps.Marker({ 
     position: brasil, 
     url: '/destinos/exibir/pais_id/2', 
     title: 'Brasil', 
     map: map 
    }); 

    var marker = new google.maps.Marker({ 
     position: argentina, 
     url: '/destinos/exibir/pais_id/1', 
     title: 'Argentina', 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     window.location.href = marker.url; 
    }); 

    </script>

Fuente

2011-02-24 Hbug

jsfiddle demo con la modificación de aumento @hsz ejemplo:

El problema es que tienes marcador declarada 3 veces y, sólo con conexión clic en evento sobre el que se declaró el pasado. Por lo tanto, debe declarar 3 nombres diferentes para 3 marcadores diferentes y adjuntar cada uno de ellos con un evento onclick. Mejor si lo haces en una matriz o algo

var markers = []; 

markers[0] = new google.maps.Marker({ 
    position: usa, 
    url: '/destinos/exibir/pais_id/3', 
    title: 'Estados Unidos', 
    map: map 
}); 

markers[1] = new google.maps.Marker({ 
    position: brasil, 
    url: '/destinos/exibir/pais_id/2', 
    title: 'Brasil', 
    map: map 
}); 

markers[2] = new google.maps.Marker({ 
    position: argentina, 
    url: '/destinos/exibir/pais_id/1', 
    title: 'Argentina', 
    map: map 
}); 

for (i = 0; i < markers.length; i++) { 
    google.maps.event.addListener(markers[i], 'click', function() { 
     window.location.href = this.url; //changed from markers[i] to this 
    }); 
}

Fuente

2011-02-24 16:32:38 kjy112

Tuve que cambiar 'this [i]' por 'this' para que funcione. – dlras2

Le está dando a cada marcador el mismo nombre de variable, así que creo que el 'marcador' de referencia solo señalará el último (Argentina).

Puede tratar de darles nombres separados y vincular al oyente a cada uno por separado.

Fuente

2011-02-24 16:27:14

Lamento volver a este viejo tema, si no se utilizan matrices, ¿podría explicar cómo declarar los marcadores? Estaba usando la matriz y solo se devuelve el último valor al hacer clic en el marcador como dijiste. – Joe

Lo siento, encontré que el método que pasaba la parte de creación a otra función lo resolvió :) – Joe

Simplemente añadiendo esta respuesta para una futura referencia para cualquier persona si necesitan que

Enviar los datos a otra función createMarker

createMarker(pos,title,weburl) 
{ 
marker = new google.maps.Marker({ 
position: pos, 
title: title, 
map: map 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    window.location.href = weburl; 
}); 
}

Gracias Tom Elliott para señalar el problema, yo estaba usando una lógica similar a kjy112

Fuente

2011-05-12 15:36:49 Joe

Respuesta

Cuestiones relacionadas