tengo un inconveniente con un mapa que se carga al seleccionar un elemento de un combobox. En primera seleccion funciona bien pero al seleccionar otra linea me tira el error Cannot set property 'innerHTML' of null. Intenté usar el window.onload = pero siempre me tira el error.
La parte de html es ésta
</head>
<body>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<div data-role="main" id="headerlineas"
style="height:100%;width:100%; position:absolute; margin:0;padding:0;
background:#F2EFE9; " >
<div data-role="header" id="titulo" data-theme="a"; >
<h3>Consulta de Lineas</h3>
</div>
<div id="cabezal">
<select name="sel_linea" id="linea" data-native-menu="false"
onchange="javascript:lineaselect();" >
<?php echo lineaOptions( 0,$_GET[a]);?>
</select>
<textarea id="infolineas" readonly name="sel_infolineas"
style="overflow:auto;border:solid 1px black; max-height:50px; min-
height:50px;max-width:100%; max-width:100%; width:100%;
height:50px;resize:none; ">
</textarea>
</div>
<div align="center" id="map" class="map"
style="height:68%;width:100%; background:#DADADA;"></div>
<script type="text/javascript">
function lineaselect() {
element = document.getElementById('linea');
var id = element.value;
// var id = element.options[element.selectedIndex].value;
var cliente = <?php echo $_GET[a];?>;
$.post("select_urbano.php", {id:id,cli:cliente}, function(data) {
$('#infolineas').html(data);
});
$.post("select_puntalinea.php", {id:id,cli:cliente}, function( data )
{
$('#map').html(data);
});
}
/* function puntalineaselect() {
elementlinea = document.getElementById('linea');
elementpuntalinea = document.getElementById('puntalineas');
var idlinea = elementlinea.value;
var idpuntalinea = elementpuntalinea.value;
var cliente = <?php echo $_GET[a];?>;
$.post("select_puntalinea.php",
{idlinea:idlinea,idpuntalinea:idpuntalinea, cli:cliente },
function( data ) {
$('#map').html(data);
});
}*/
</script>
</div>
</body>
y esta la de java script (la parte donde llama a los div y se ejecuta la parte que falla.
var vueltas = 1;
for (var i=0;i<coord_arr.length;i++){
var data=coord_arr[i].split('|');
var longi_parada= parseFloat(data[0]); //toma la longitud de la parada **** viene en este formato '-33.1333' *****
var lati_parada= parseFloat(data[1]); //toma la latitud
var id_parada = (data[2]);
var iconoParada = new ol.Feature({
'geometry': new ol.geom.Point(ol.proj.transform(
[longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857')),
'id': ol.proj.transform(
[longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857'),
'name': id_parada
});
source.addFeature(iconoParada);
}
//******** ventana popup para paradas **********//
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var popup = new ol.Overlay({
element: container,
positioning: 'bottom-center',
content: id_parada,
stopEvent: true,
autoPan: true,
offset: [0, -50],
autoPanAnimation:{
duration: 20
}
});
window.onload = map.addOverlay(popup);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
alert (feature.get('name'));
var coordinates = feature.getGeometry().getCoordinates();
content.innerHTML = '<p>Parada:</p><code>' +feature.get('name') +'</code>';
popup.setPosition(coordinates);
}
});
closer.onclick = function() {
popup.setPosition(undefined);
closer.blur();
return false;
};
// closer.onclick = function() {
// popup.setPosition(undefined);
// closer.blur();
// return false;
// };
// // change mouse cursor when over marker
// map.on('pointermove', function(d) {
// if (d.dragging) {
// $(element).popover('destroy');
// return;
// }
// var pixel = map.getEventPixel(d.originalEvent);
// var hit = map.hasFeatureAtPixel(pixel);
// //popup.getTarget().style.cursor = hit ? 'pointer' : '';
// });
}