Angular $http.post google maps Javascript API error

Question

I'm having a problem with Google Maps Javascript API while using Angular JS $http.post(), before any other explanation, this is the error:

angular.js:13642 
TypeError: Cannot read property 'lat' of undefined
        at _.H.toString (js?key=API_KEY&libraries=places:97)
        at e (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at dc (jquery.min.js:4)
        at Object.<anonymous> (jquery.min.js:4)
        at Function.each (jquery.min.js:2)
        at dc (jquery.min.js:4)

Which occours here:
app.js

_sost.validateSost = function(form){
    $http.post(php_data.ajax_url, send_data, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    }).success(function(response){
        var data = response.data;
        _sost._posting = false;
        _sost._postresult = data.status;
        if(data.status == 0){
            _sost._inserted = _completed.length;
        }
    }).then(function () {
        _sost.lista = [{}];
    });
}
_sost.addLocation = function (sost) {
    if (sost.luogo && typeof(sost.luogo) == 'object') {
        var google_location = sost.luogo;
        var location_components = google_location.address_components;
        var location_geometry = google_location.geometry.location;
        if (location_components) {
            location_components.forEach(function (item) {
                var _type = item.types[0];
                if (_type == 'administrative_area_level_1') {
                    sost.regione = item.long_name;
                } else if (_type == 'administrative_area_level_2') {
                    sost.provincia = item.long_name;
                } else if (_type == 'administrative_area_level_3') {
                    sost.comune = item.long_name;
                } else if (_type == 'postal_code') {
                    sost.cap = item.short_name;
                } else if (_type == 'route') {
                    sost.indirizzo = item.long_name;
                } else if (_type == 'country') {
                    sost.nazione = item.long_name;
                }
            });
            if (!sost.hasOwnProperty('cap')) {
                sost.cap = null;
            }
            if (!sost.hasOwnProperty('indirizzo')) {
                sost.indirizzo = null;
            }
            sost.location = google_location.formatted_address;
        }
        if (location_geometry) {
            sost.lat = location_geometry.lat();
            sost.lng = location_geometry.lng();
        }
    }
};

This is the HTML part:

<section id="registra-membro" ng-controller="sostenitori as st">
    <form novalidate method="post" name="st_f" id="add-sostenitori" ng-submit="st.validateSost(st_f)" ng-show="!st._posting">
        ...
        <input type="text" autocomplete="off" ng-change="st.addLocation(sost)" g-places-autocomplete force-selection="true" ng-model="sost.luogo" name="lu_{{$index}}" class="col-2-3" placeholder="Indirizzo" required/>
    </form>
</section>

I'm using the google.places module to load Google Maps's autocomplete, and everything works fine, but I can't realize how this error triggers while using $http.post(), because there are no Google Maps API related functions.

If you need more code please ask, this is really becoming weird, I'm using jQuery 1.12.4 and AngularJS 1.5.6

Update

I'm trying to find this error in Google Maps Javascript API, and i've found something here:

_.H.prototype.toString=function() {
    return"("+this.lat()+", "+this.lng()+")"
}

Which is actually the part that is giving me error, but I can't find where it calls this _.H.prototype.toString function.
H should be the geometry.location part, it has methods like lat and lng which gives location coordinates

Another update

I've found which part of my angular code triggers that function in Google Maps API Javascript, and it's this:

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
    $httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined) {
            return data;
        }
        console.log($.param(data));
        return data;
    };
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});

The $.param(data) triggers the error, and I guess this is a nice step forward :)

Have you tried working with JSON.stringify(data) instead of $.param(data) ? — Nils
– Nils, Commented Jun 28, 2016 at 8:48

CapitanFindus · Accepted Answer · 2016-06-28 08:43:18Z

1

After 1 day of complete stuck, I've solved my problem.
After searching inside Google Maps API Javascript for hours, I've discovered that the problem was a jQuery function, which is $.param().
I don't know why it triggered the error ( described previously ), but changing it removed my problem, so, this is what I've done.

app.js

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
    $httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined) {
            return data;
        }
        // !! REMOVED $.param(data)
        return data;
    };
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});
// Added $httpParamSerializerJQLike in dependencies
$http.post(php_data.ajax_url, $httpParamSerializerJQLike(send_data), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}).then(function (response) {
    var data = response;
    if (data.hasOwnProperty('status')) {
        _sost._posting = false;
        _sost._postresult = data.status;
        if (data.status == 0) {
            _sost._inserted = _completed.length;
        }
    }
    _sost.lista = [{}];
});

So, basically, I've replaced jQuery.param() function with another AngularJS built-in function, found here

answered Jun 28, 2016 at 8:43

CapitanFindus

1,52615 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kirill Slatin Over a year ago

what's important for future readers, please, specify versions that you use, JQuery and Angular

CapitanFindus Over a year ago

@KirillSlatin sure, I'll add now to my question :)

Collectives™ on Stack Overflow

Angular $http.post google maps Javascript API error

Update

Another update

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

Another update

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related