I have a problem reading an XML with several data; including the latitude and longitude of a restaurant.
The structure of the XML is:
<?xml version="1.0" encoding="utf-8" ?>
<restaurantes>
<restaurant>
<imagen>1893/01.jpg</imagen>
<nombre>1893</nombre>
<direccion>Av. Raúl Scalabrini Ortiz 701, Villa Crespo, CABA</direccion>
<telefono>4773-2951</telefono>
<email>[email protected]</email>
<descripcion>Descripción</descripcion>
<latitud>-34.5971816</latitud>
<longitud>-58.43420119999996</longitud>
<espumante>si</espumante>
<vino>no</vino>
<postre>si</postre>
</restaurant>
And the HTML is:
<link rel="stylesheet" type="text/css" href="css/fullpage.css" />
<link rel="stylesheet" type="text/css"href="css/normalize.min.css">
<link rel="stylesheet" type="text/css"href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'restaurantes.xml',
dataType: 'xml',
success: function(xml) {
$(xml).find('restaurant').each(function() {
$('#restaurantes').append(
'<div class="grid col-md-2 no_col-md-2">' +
'<figure class="effect-layla">' +
'<img src="images/restaurantes/'+ $(this).find('imagen').text() + '" alt="imagen"/>' +
'<figcaption>' +
'<h2>' + $(this).find('nombre').text() + '</h2>' +
'<p>' + $(this).find('direccion').text() + '</p>' +
'<p>' + $(this).find('telefono').text() + '</p>' +
'<p><a href="#" class="ver_mas" data-toggle="modal" data-imagen="' + $(this).find('imagen').text() + '" data-nombre="' + $(this).find('nombre').text() + '" data-direccion="' + $(this).find('direccion').text() + '" data-telefono="' + $(this).find('telefono').text() + '" data-descripcion="' + $(this).find('descripcion').text() + '" data-espumante="' + $(this).find('espumante').text() + '" data-vino="' + $(this).find('vino').text() + '" data-postre="' + $(this).find('postre').text() + '">+ VER MAS</a>' +
'<p><a href="#" id="ubicar_mapa" data-longitud="' + $(this).find('longitud').text() + '" data-latitud="' + $(this).find('latitud').text() + '">UBICAR EN EL MAPA</a></p>' +
'</figcaption>' +
'</figure>' +
'</div>');
});
}
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section0">
<video id="myVideo" loop muted data-autoplay>
<source src="video/.mp4" type="video/mp4">
<source src="video/.webm" type="video/webm">
</video>
<div class="layer">
<div class="logo_hsbc">
<img style="width: 70%;" src="imagen" />
</div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="home_centrado">
<div id="logo_mundoepicureo">
<img src="images/header.svg" width="70%">
</div>
<div id="logo_modomesa">
<img src="images/home_modo_mesa.svg" width="85%">
</div>
<h1 class="roboto-condensed">Desconectémonos de los celulares<br><strong>para conectarnos a través de los sabores</strong></h1>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="placa_negra"></div>
<div class="slide" id="slide1">
<div class="container-flex">
<div class="row">
<div class="col-md-12 padding_titulo">
<h1>¿Qué es <strong></strong>?</h1>
</div>
<div class="col-md-3"></div>
<div class="col-md-6">
<img class="icono_chico" src="imagen" />
<h3><strong></strong>.</h3>
<div class="linea_roja">
<div class="container-flex">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h3>A quienes se desconecten de sus celulares y se conecten a través de los sabores los premiamos:</h3>
<img class="icono_grande" src="imagen" />
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="container-flex">
<div class="row">
<div class="col-md-12">
<h2>RESTAURANTES</h2>
<h4>Elegí en el que te gustaría disfrutar de <strong>Modo Mesa en compañía</strong></h4>
</div>
</div>
<div class="row no_row" id="restaurantes"></div>
</div>
</div>
<div class="section" id="mapa" data-percentage="80" data-centered="true" style="height: 80%;">
<div class="container_map">
<div id="mostrar_mapa"></div>
</div>
</div>
<div class="section fp-auto-height" id="section4">
<div class="container-flex">
<h1>FOOTER</h1>
</div>
</div>
</div>
<div id="modal_restaurant" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<div id="restaurant_modal"></div>
</div>
<div class="modal-body">
<div id="principal">
<div class="row">
<div class="col-md-4 text-left">
<h2 id="nombre_modal"></h2>
</div>
<div class="col-md-8 text-right">
<div class="row">
<div class="col-md-8 text-right">
<h6>Este Restaurant te premia con</h6>
<span id="texto_espumante_modal">ESPUMANTE + </span>
<span id="texto_vino_modal">VINO + </span>
<span id="texto_postre_modal">POSTRE o CAFÉ</span>
</div>
<div class="col-md-4 text-right">
<div class="premio align-baseline" id="vino_modal">
<img src="images/vino.png" height="50">
<span>+</span>
</div>
<div class="premio align-baseline" id="espumante_modal">
<img src="images/espumante.png" height="50">
<span>+</span>
</div>
<div class="premio align-baseline" id="postre_modal">
<img src="images/cafe.png" height="30">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="secundario">
<p id="descripcion_modal"></p>
</div>
<div id="datos">
<div class="row">
<div class="col-md-6 text-center">
<img src="images/mapa.png" width="31" height="42" class="icono_modal" />
<p id="direccion_modal"></p>
</div>
<div class="col-md-6 text-center">
<img src="images/celular.png" width="30" height="53" class="icono_modal" />
<p id="telefono_modal"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
css3: true,
verticalCentered: true,
fitToSection: false,
scrollOverflow: true,
offsetSections: true,
offsetSectionsKey: 'Y29kZXBlbi5pb196MDZiMlptYzJWMFUyVmpkR2x2Ym5NPWhPNA==',
afterRender: function () {
//Start the whole shabang when DOM and APIs are ready by calling initialize()
initMap();
}
});
</script>
<script type="text/javascript">
$(document).on("click", ".ver_mas", function () {
document.getElementById("nombre_modal").innerHTML = $(this).attr('data-nombre');
document.getElementById("descripcion_modal").innerHTML = $(this).attr('data-descripcion');
document.getElementById("telefono_modal").innerHTML = $(this).attr('data-telefono');
document.getElementById("direccion_modal").innerHTML = $(this).attr('data-direccion');
imgmodal = $(this).attr('data-imagen');
$('#restaurant_modal').css('background-image', 'url(images/restaurantes/' + imgmodal + ')');
$('#modal_restaurant').modal('show');
vinomodal = $(this).attr('data-vino');
espumantemodal = $(this).attr('data-espumante');
postremodal = $(this).attr('data-postre');
if (vinomodal == 'no'){
$('#vino_modal').css('display', 'none');
$('#texto_vino_modal').css('display', 'none');
$('#espumante_modal').css('display', 'initial');
$('#texto_espumante_modal').css('display', 'initial');
};
if (espumantemodal == 'no'){
$('#espumante_modal').css('display', 'none');
$('#texto_espumante_modal').css('display', 'none');
$('#vino_modal').css('display', 'initial');
$('#texto_vino_modal').css('display', 'initial');
};
if (postremodal == 'no'){
$('#postre_modal').css('display', 'none');
$('#texto_postre_modal').css('display', 'none');
};
});
</script>
<script>
var map, infoWindow;
// Initialize and add the map
function initMap() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'cooperative',
styles: [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#c4c4c4"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#707070"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21},{"visibility":"on"}]},{"featureType":"poi.business","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#be2026"},{"lightness":"0"},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"visibility":"off"},{"hue":"#ff000a"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#575757"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.stroke","stylers":[{"color":"#2c2c2c"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#999999"}]},{"featureType":"road.local","elementType":"labels.text.stroke","stylers":[{"saturation":"-52"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
};
var map = new google.maps.Map(document.getElementById("mostrar_mapa"), myOptions);
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
// infoWindow.setContent('Location found.');
// infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?&sensor=false&key=AIzaSyByeOBo1F9jnhVnJVL-ZNbid7dIhWuxGsw&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'restaurantes.xml',
dataType: 'xml',
success: function(xml) {
$(xml).find('restaurant').each(function() {
var mapa_longitud = $(this).find('longitud').text();
var mapa_latitud = $(this).find('latitud').text();
console.log(mapa_latitud);
console.log(mapa_longitud);
lat = parseFloat( mapa_latitud );
lng = parseFloat( mapa_longitud );
var myLatLng = {lat, lng};
console.log(myLatLng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'PRUEBA'
});
});
}
});
});
</script>
</body>
I read the XML twice because I can not find a way to read the latitude and longitude for the first time and create the marker for that.
Can someone please give me a hand?
Thank you very much.