Adding an onclick event to google.map marker

Question

I'm stuck trying to figure out a little bit of JS :( I have a google map

var myCenter=new google.maps.LatLng(53, -1.33);  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);  var marker=new google.maps.Marker({     position:myCenter,     icon:'images/pin.png',     url: 'http://www.google.com/',     animation:google.maps.Animation.DROP }); marker.setMap(map); }  google.maps.event.addDomListener(window, 'load', initialize); 

But I can't seem to hook up the onclick event for the marker url?

I know it has something to do with adding

google.maps.event.addListener(marker, 'click', function() {window.location.href = marker.url;}); 

But where ever I put it causes the map to not display or the marker to not display.

Answer 1

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

Answer 2

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