Aggiunta di un evento onclick per google.map marcatore

Question

Sono bloccato cercando di capire un po 'di JS :(ho una mappa di google

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

Ma io non riesco a collegare l'onclick evento per l'url marcatore?

so che ha qualcosa a che fare con l'aggiunta di

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

Ma dove mai ho messo che provoca la mappa di non visualizzare o il marcatore di non visualizzare.

Answer 1

Assicurarsi che sia definito al di fuori di initialize(). In caso contrario, sarà undefined se si tenta di assegnare il listener di clic al di fuori di initialize().

Inoltre, potrebbero verificarsi problemi di SAME-ORIGIN se si tenta di caricare l'URL www.google.com, ma dovrebbe funzionare correttamente con un URL locale.

codice aggiornato

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

Ecco cosa ho fatto in passato. L'unica differenza che vedo tra il mio codice e il tuo è che imposto la mappa dei marker nelle opzioni dei marker e che stai impostando in marker.setMap (Map);

var marker = new window.google.maps.Marker({ 
     position: markerPosition, 
     map: map, 
     draggable: false, 
     zIndex: zIndex, 
     icon: getNewIcon(markerType != "archive", isBig) 
     , animation: markerAnimation 
    }); 


    window.google.maps.event.addListener(marker, 'click', function() { 
     // do stuff 
    }); 

Answer 3

Non sai da dove il contenuto è, ma si avrebbe bisogno di fare quanto segue ...

var yourContent = new google.maps.InfoWindow({ 
    content: 'blah blah' 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    yourContent.open(map,marker); 
}); 

Answer 4

Questo è quello che io userei:

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

io non sono sicuro se è possibile memorizzare una proprietà url con un oggetto Marker.

Se è necessario visualizzare più marcatori (vale a dire da una chiamata API) quindi è possibile utilizzare un ciclo for come questo:

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

Answer 5

var myLatlng = new google.maps.LatLng(-25.363882, 131.044922); 
var mapOptions = { 
    zoom: 4, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Hello World!', 
    url: 'http://www.google.com' 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    window.location = marker.url; 
}); 

Se andate in questa pagina: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

e incollare il codice sopra nella console vedrai che funziona.

Credo che il problema che hai è il seguente, è necessario mettere questa riga:

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

all'interno della funzione di inizializzazione.