Question

154

Google Maps Marker as a link

rated 0 times [ 155] [ 1] / answers: 1 / hits: 20524 / 14 Years ago, thu, february 24, 2011, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

johnnaj

Add To Favorites

Follow

Total Points: 490

Total Questions: 109

Total Answers: 104

Location: Zambia

Member since Thu, Jun 25, 2020

4 Years ago

answered 14 Years ago turnerf · Accepted Answer

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

    });

}