Добавление события 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;
});
внутри вашей функции инициализации.