Добавление события onclick в маркер google.map

Я застреваю, пытаясь выяснить немного JS:( У меня есть карта 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);

Но я не могу подключить событие onclick для URL-адреса маркера?

Я знаю, что это как-то связано с добавлением

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

Но где бы я ни находился, это приводит к тому, что карта не отображается или маркер не отображается.

Ответ 1

Убедитесь, что значение marker определено вне инициализации(). В противном случае это будет undefined, если вы попытаетесь назначить прослушиватель кликов вне инициализации().

Кроме того, у вас могут возникнуть проблемы с SAME-ORIGIN, если вы попытаетесь загрузить URL-адрес www.google.com, но он должен работать нормально с локальным URL-адресом.

Обновленный код

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

Рабочая демонстрация при загрузке

Ответ 2

Это то, что использует Id:

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

Не уверен, что вы можете сохранить свойство url с объектом Marker.

Если вам нужно отобразить несколько маркеров (т.е. из вызова API), вы можете использовать цикл for следующим образом:

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

Ответ 3

Вот что я сделал в прошлом. Единственное различие, которое я вижу между моим кодом и вашим, заключается в том, что я установил карту маркера в параметрах маркера, и вы устанавливаете с помощью marker.setMap(Карта);

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

Ответ 4

Не уверен, где находится ваш контент, но вам нужно будет сделать следующее...

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

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

Ответ 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;
});

Если вы перейдете на эту страницу: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

и вставьте код в консоль, вы увидите, что он работает.

Я думаю, что у вас есть проблема: вам нужно поставить эту строку:

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

внутри вашей функции инициализации.