CODEWITHSUNDEEP
javascriptgoogle-maps
Hbug
Hbug

Reputation: 177

Google Maps Marker as a link

I have the following code, but it is not working, the link only is showed on the last point (Argentina), some help?

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

Upvotes: 5

Views: 20463

Answers (3)

KJYe.Name
KJYe.Name

Reputation: 17169

jsfiddle demo with modification augmenting @hsz example:

The problem is you have marker declared 3 times, and attach only click event on the one that is declared last. So, you must declare 3 different name for 3 different markers and attach each of them with onclick event. Better if you do it in an array or something

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
    });
}

Upvotes: 11

Joe
Joe

Reputation: 610

Just adding this answer for future reference for anyone if they need it

Send the details to another createMarker function

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;  
});
}

Thanks Tom Elliott for pointing out the issue, i was using a logic similar to kjy112

Upvotes: 3

Tom Elliott
Tom Elliott

Reputation: 1926

You're giving each marker the same variable name, so I think the reference 'marker' will only point to the last one (Argentina).

You could try giving them separate names and binding the listener to each one separately.

Upvotes: 4

Related Questions