Google maps click event not working

-3

Что я здесь делаю неправильно? щелкать на зеленых маркеров не оказывает влияния в этом webpage Google maps click event not working

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel=StyleSheet href="misc/pdavis.css" type="text/css"> 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script> 

<style>#map-canvas {width:200px;height:200px;}</style> 

<script> 
    function initialize() { 
    var mapCanvas = document.getElementById('map-canvas'); 
    var mapOptions = {center:new google.maps.LatLng(52.371431,4.866588),zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:false} 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
    var myLatlng = new google.maps.LatLng(52.371431,4.866588); 
    var marker = new google.maps.Marker({position: myLatlng, map: map,title:'Kostverlorenvaart, en aansluiting Westelijk Marktkanaal'}); 
    var myLatLng0 = new google.maps.LatLng(52.371780,4.866096); 
    var marker0 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'A'}),position:myLatLng0,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng1 = new google.maps.LatLng(52.371861,4.866161); 
    var marker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'B'}),position:myLatLng1,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng2 = new google.maps.LatLng(52.371471,4.867189); 
    var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'C'}),position:myLatLng2,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng3 = new google.maps.LatLng(52.371458,4.867103); 
    var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'D'}),position:myLatLng3,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng4 = new google.maps.LatLng(52.370698,4.865923); 
    var marker4 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'E'}),position:myLatLng4,url:'http://www.pdavis.nl',map:map}); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    google.maps.event.addListener(marker0, 'click', function(){window.open(marker0.url);}); 
    google.maps.event.addListener(marker1, 'click', function(){window.open(marker1.url);}); 
    google.maps.event.addListener(marker2, 'click', function(){window.open(marker2.url);}); 
    google.maps.event.addListener(marker3, 'click', function(){window.open(marker3.url);}); 
    google.maps.event.addListener(marker4, 'click', function(){window.open(marker4.url);}); 

</script> 
<title>Kostverlorenvaart, en aansluiting Westelijk Marktkanaal</title> 
</head> 
<body onload='initialize()'> 
<div id='wrapper2'> 
...

(дополнительный текст, потому что Stack Overflow подумал, что мой вопрос содержал слишком много кода и не хватает текста)

источник

2015-04-19 Peter Beresford

там нет DIV с id = "map-canvas" в вашем опубликованном коде. – geocodezip

Вы добавляете маркер кликах слушателей вне инициализировать функцию, поэтому они запускаются до создания маркеров (когда срабатывает событие onload). Переместите эти вызовы внутри вашей функции инициализации.

function initialize() { 
    var mapCanvas = document.getElementById('map-canvas'); 
    var mapOptions = {center:new google.maps.LatLng(52.371431,4.866588),zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:false} 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var myLatlng = new google.maps.LatLng(52.371431,4.866588); 
    var marker = new google.maps.Marker({position: myLatlng, map: map,title:'Kostverlorenvaart, en aansluiting Westelijk Marktkanaal'}); 
    var myLatLng0 = new google.maps.LatLng(52.371780,4.866096); 
    var marker0 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'A'}),position:myLatLng0,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng1 = new google.maps.LatLng(52.371861,4.866161); 
    var marker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'B'}),position:myLatLng1,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng2 = new google.maps.LatLng(52.371471,4.867189); 
    var marker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'C'}),position:myLatLng2,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng3 = new google.maps.LatLng(52.371458,4.867103); 
    var marker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'D'}),position:myLatLng3,url:'http://www.pdavis.nl',map:map}); 
    var myLatLng4 = new google.maps.LatLng(52.370698,4.865923); 
    var marker4 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'E'}),position:myLatLng4,url:'http://www.pdavis.nl',map:map}); 
    google.maps.event.addListener(marker0, 'click', function(){window.open(marker0.url);}); 
    google.maps.event.addListener(marker1, 'click', function(){window.open(marker1.url);}); 
    google.maps.event.addListener(marker2, 'click', function(){window.open(marker2.url);}); 
    google.maps.event.addListener(marker3, 'click', function(){window.open(marker3.url);}); 
    google.maps.event.addListener(marker4, 'click', function(){window.open(marker4.url);}); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);

working fiddle

фрагмент кода (не то, что window.open не работает в SO фрагменты кода, замененные с InfoWindow):

function initialize() { 
 
    var mapCanvas = document.getElementById('map-canvas'); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(52.371431, 4.866588), 
 
    zoom: 16, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    streetViewControl: false, 
 
    mapTypeControl: false 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 
    var myLatlng = new google.maps.LatLng(52.371431, 4.866588); 
 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    map: map, 
 
    title: 'Kostverlorenvaart, en aansluiting Westelijk Marktkanaal' 
 
    }); 
 
    var myLatLng0 = new google.maps.LatLng(52.371780, 4.866096); 
 
    var marker0 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'A' 
 
    }), 
 
    position: myLatLng0, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng1 = new google.maps.LatLng(52.371861, 4.866161); 
 
    var marker1 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'B' 
 
    }), 
 
    position: myLatLng1, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng2 = new google.maps.LatLng(52.371471, 4.867189); 
 
    var marker2 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'C' 
 
    }), 
 
    position: myLatLng2, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng3 = new google.maps.LatLng(52.371458, 4.867103); 
 
    var marker3 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'D' 
 
    }), 
 
    position: myLatLng3, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var myLatLng4 = new google.maps.LatLng(52.370698, 4.865923); 
 
    var marker4 = new StyledMarker({ 
 
    styleIcon: new StyledIcon(StyledIconTypes.MARKER, { 
 
     color: '00ff00', 
 
     text: 'E' 
 
    }), 
 
    position: myLatLng4, 
 
    url: 'http://www.pdavis.nl', 
 
    map: map 
 
    }); 
 
    var infoWin = new google.maps.InfoWindow(); 
 
    google.maps.event.addListener(marker0, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker0.url);"), infoWin.open(map, marker0); 
 
    }); 
 
    google.maps.event.addListener(marker1, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker1.url);"), infoWin.open(map, marker1); 
 
    }); 
 
    google.maps.event.addListener(marker2, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker2.url);"), infoWin.open(map, marker2); 
 
    }); 
 
    google.maps.event.addListener(marker3, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker3.url);"); 
 
    infoWin.open(map, marker3); 
 
    }); 
 
    google.maps.event.addListener(marker4, 'click', function() { 
 
    infoWin.setContent("request was made in a sandboxed frame whose 'allow-popups' permission is not set.<br>window.open(marker4.url);"); 
 
    infoWin.open(map, marker4); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

body, 
 
html, 
 
#map-canvas, 
 
#wrapper2 { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script> 
 
<div id='wrapper2'> 
 
    <div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
 
</div>

источник

2015-04-19 13:35:42 geocodezip

Действительно; большое спасибо –

Google maps click event not working

ответ

Смежные вопросы