Use google maps with data brought by ajax

Question

Use google maps with data brought by ajax

Navigation

#1 by (0 votes)

0

I'm bringing data from an external api with ajax, which gives me the longitude and latitude but when I apply it to google maps it does not read the data. This is the code of the ajax query

jQuery.ajax({
            url: "https://quasar.e-htl.com.br/booking/detail",
            type: 'POST',
            headers: {"Authorization": "Bearer " + xmiCookie},
            data: datos,
            dataType: "json",
            beforeSend: function () {
                swal({
                    title: "Procesando..",
                    text: "Recibiendo los datos, espere por favor...",
                    icon: "success",
                    buttons: false,
                    closeOnClickOutside: false,
                    closeOnEsc: false
                });
            },
            success: function ( json ) {
                 jQuery.map(json, function (val) {
                 var hlatitud = val.attributes.Hotel.HotelLatitude;
                 var hlongitud = val.attributes.Hotel.hotelLongitude;
              });                
            },
            error: function ( ) {
            }
             });

I have the google maps function at the end of the page in a script

        function initMap() {
        var uluru = {lat: hlatitud, lng: hlongitud};
        var map = new google.maps.Map(document.getElementById('mapSingle'), {
        zoom: 4,
        center: uluru
        });
        var marker = new google.maps.Marker({
        position: uluru,
        map: map
        });
    }

and also the call to the function of google maps

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

javascript jquery google-maps function

asked by Avancini1 15.06.2018 в 03:45

source

1 answer

PHP: Make capture with html2canvas.js and save it to a server Save content from an HTML checkbox in MySql using PHP

score 0 · Answer 1

you must include the function in the result of the AJAX request

jQuery.ajax({
            url: "https://quasar.e-htl.com.br/booking/detail",
            type: 'POST',
            headers: {"Authorization": "Bearer " + xmiCookie},
            data: datos,
            dataType: "json",
            beforeSend: function () {
                swal({
                    title: "Procesando..",
                    text: "Recibiendo los datos, espere por favor...",
                    icon: "success",
                    buttons: false,
                    closeOnClickOutside: false,
                    closeOnEsc: false
                });
            },
            success: function ( json ) {
                 jQuery.map(json, function (val) {
                 var hlatitud = val.attributes.Hotel.HotelLatitude;
                 var hlongitud = val.attributes.Hotel.hotelLongitude;
                 initMap(hlatitud ,hlongitud )
              });                
            },
            error: function ( ) {
            }
             });

and weigh it by parameters the two values to the function

function initMap(hlatitud,hlongitud) {
        var uluru = {lat: hlatitud, lng: hlongitud};
        var map = new google.maps.Map(document.getElementById('mapSingle'), {
        zoom: 4,
        center: uluru
        });
        var marker = new google.maps.Marker({
        position: uluru,
        map: map
        });
    }