Pregunta Google Maps Marker como enlace


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

<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>

5
2018-02-24 16:23


origen


Respuestas:


jsfiddle Demostración con modificación aumentando el ejemplo de @hsz:

El problema es que tiene el marcador declarado 3 veces y adjunte solo el evento de clic en el que se declara el último. 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
    });
}

11
2018-02-24 16:32



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 intentar darles nombres separados y vincular al oyente con cada uno por separado.


4
2018-02-24 16:27



Solo agregando esta respuesta para referencia futura para cualquier persona si la necesitan

Enviar los detalles 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 por señalar el problema, estaba usando una lógica similar a kjy112


3
2018-05-12 15:36