Enter coordinates (bookmarks) in a google map

Question

Enter coordinates (bookmarks) in a google map

Navigation

#1 by (1 votes)

0

DATA:

null([{"id":"0008","nombre":"FACULTAD DE CIENCIAS I","bbox":"-0.515358212377548,38.3869756882801,-0.514646718387274,38.3874205581019","count_geometrias":2098,"plantas":"{P1,P3,P2,PB,PS}"},{"id":"0206","nombre":"CENTRO INCUBADOR DE EMPRESAS","bbox":"-0.527918228743998,38.3810201755556,-0.526373500350929,38.3822401809516","count_geometrias":250,"plantas":"{PB}"},{"id":"0028","nombre":"RECTORADO Y SERVICIOS GENERALES","bbox":"-0.512869386775825,38.3843008776237,-0.51118534833184,38.3851009545756","count_geometrias":525,"plantas":"{PB,PS,P1}"},{"id":"0026","nombre":"FACULTAD DE CIENCIAS DE LA SALUD","bbox":"-0.51488946186396,38.3835841864622,-0.514392670169672,38.384200566229","count_geometrias":749,"plantas":"{PB,P1}"},{"id":"0040","nombre":"MUSEO DE LA UNIVERSIDAD DE ALICANTE","bbox":"-0.512495794840584,38.3804892561839,-0.511138071633159,38.3815679678406","count_geometrias":310,"plantas":"{P1,PB,PS}"}])

<script>
    var coordenadas;
    function testAjax() {
        $.ajax({
            url: 'https://dev.datos.ua.es/uapi/5QGUfP3UM6j5VXERjKvU/datasets/11/data', type: 'GET',
            dataType: "jsonp",
            success: function (data) {
                $.each(data, function (i, item) {
                    coordenadas = item.bbox.split(',');
                    //console.log(coordenadas[1], coordenadas[0]);
                    initMap(coordenadas);
                });
            }
        });
    }

</script>
<script>testAjax();</script>

<div id="map"></div>
<script>    

    function initMap(data) { //data es el nuevo coordenadas
        //console.log(data);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: { lat: 38.384628, lng: -0.513708 }
        });



        // AGREGAR MARCADORES DE LOS EDIFICIOS
            var latLng = new google.maps.LatLng(data[1], data[0]);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

        </script>

This is the code that I have, in which there is a data with different information, I get all the latitudes and longitudes, but what I have to do is get all those coordinates to enter the map as markers, not only the First pair of latitude and longitude, which is what happens to me.

javascript jquery json ajax google-maps

asked by Kora 15.10.2017 в 20:53

source

1 answer

Check if there are users in the BD problem with login perl

score 1 · Accepted Answer

Based on your previous questions I leave an answer ... Your problem is that you are calling initMap in each iteration and it is incorrect besides that data is the ajax response and not the coordinates.

(function testAjax() {
    $.ajax({
        url: 'https://dev.datos.ua.es/uapi/5QGUfP3UM6j5VXERjKvU/datasets/11/data', type: 'GET',
        dataType: "jsonp",
        success: initMap
    });
})()

function initMap(data) {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: { lat: 38.384628, lng: -0.513708 }
    });

    $.each(data, function (i, item) {
        var coordenadas = item.bbox.split(',');

        var marcador = new google.maps.Marker({
            position: new google.maps.LatLng(coordenadas[1], coordenadas[0]),
            map: map
        });


        // OPCIONAL
        // Mostrar texto al hacer click en los marcadores

        // Ventana de información
        var infowindow = new google.maps.InfoWindow({
            content: '<span>' + item.nombre + '</span>'
        });   

        // Event listener, abre la ventana al hacer click en el
        // marcador
        google.maps.event.addListener(marcador, 'click', function() {
            infowindow.open(map, marcador);
        });

    });
}

I leave the bin: JSBin