Adding an onclick event to google.map marker
This is what I’d use:
var latLng = new google.maps.LatLng(53, -1.33);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: latLng,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
scrollwheel: false,
zoom: 14
});
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
icon: 'images/pin.png',
map: map,
position: latLng
});
google.maps.event.addDomListener(marker, 'click', function() {
window.location.href = 'http://www.google.co.uk/';
});
I’m not sure if you can store a url
property with a Marker
object.
If you need to display multiple markers (i.e. from an API call) then you can use a for
loop like this:
for (var i = 0; i < markers.length; i++) {
(function(marker) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
icon: 'images/pin.png',
map: map,
position: market.latLng
});
google.maps.event.addDomListener(marker, 'click', function() {
window.location.href = marker.url;
});
})(markers[i]);
}
Make sure the marker
is defined outside of initialize(). Otherwise, it will be undefined
if you attempt to assign the click listener outside of initialize().
Also, you may have SAME-ORIGIN issues if you attempt to load url www.google.com
, but it should work fine with a local url.
Updated code
var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
position:myCenter,
url: '/',
animation:google.maps.Animation.DROP
});
function initialize()
{
var mapProp = {
center:myCenter,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;});
Working Demo on Bootply