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>
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
});
}
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With