код внутри карты Google infobubble не работает в первый раз

Внутри infoBubble Google map Я добавил функцию, но при первом запуске infoBubble код не работает, и если я открою второй infoBubble или закрою первый и повторно открыть, работать с кодом. Пожалуйста, помогите. Это моя страницакод внутри карты Google infobubble не работает в первый раз

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento senza titolo</title> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/infobubble.js"></script> 
<script> 
var infoBubble = new InfoBubble(); 
var infowindow = new google.maps.InfoWindow(); 
var map; 
function initialize() { 
var config = { 
    el: 'map', 
    lat: 40.2329, 
    lon: -3.42, 
    zoom: 10, 
    type: google.maps.MapTypeId.ROADMAP 
}; 

var data = [   
['Giorgio Rossi', 40.15, -3.42, '1' ], 
['Marta Bianchi', 40.25, -3.42, '2'], 
['Carlo Verdi', 40.15, -3.62, '3'], 
['Mario Giallo', 40.25, -3.62, '4'],  
]; 

    var map = new google.maps.Map(document.getElementById(config.el), { 
     zoom: config.zoom, 
     scrollwheel: false, 
     center: new google.maps.LatLng(config.lat, config.lon), 
     mapTypeId: config.type 
    }); 

var markers = []; 
var i ; 
    for (i = 0; i < data.length; i++) {   
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(data[i][1], data[i][2]),    
      map: map 
     });   
marker.info = '<div id="'+data[i][3]+ '">'+data[i][0]+ '</div>';   
marker.html = '<div style="padding:25px"><a class="testClass" href="javascript:;" > My Friend '+data[i][3]+'</a> </div>'; 

google.maps.event.addListener(marker , 'click', function(){ 
    infoBubble.setContent(this.html); 
    infoBubble.open(map, this); 
    var prova = this.info; 
    var found = $(prova).attr('id'); 
    google.maps.event.addListenerOnce(infoBubble, 'domready', function() {   
    $(".testClass").click(function() { 
    alert(found);   
    })  
}); 
}); 
    } 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

</head> 

<body> 
<div id="map" style="width:700px; height:500px"></div> 
</body> 
</html>

источник

2015-09-09 Alberto

Как вы можете видеть из this SO question и accepted answer ваша проблема связана с ошибкой в коде infobubble.js.

Более конкретно, размещение domready триггера был в неправильной части кода, до вызова asynchronouse setMap(), вместо того, чтобы после в infobubble элементы добавляются к DOM в функции onAdd() (которая называется после функции setMap()).

Что это означает, что ваш первый маркер мыши на domready события, элементы еще не были добавлены к DOM - но они были несколько миллисекунд позже - именно поэтому второй маркер нажмите работал.

Я установил domready размещение в infobubble.js и создали pull request, который был принят и в настоящее время объединены в официальный код.

Если вы обновите свой infobubble.jsto the latest commit (используйте не ограниченный на данный момент), вы, вероятно, увидите, что проблема устранена.

Non-working JS Fiddle here используя старый код.
Working JS Fiddle here используя новый код.

источник

2015-11-05 19:17:32 goredwards

код внутри карты Google infobubble не работает в первый раз

ответ

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