a.lat is not a function when adding fit="true" on ui-gmap-markers

[liadlivnat]

Hi this is my map, for some reason i get this error, not sure why, please help!

This is the stack trace:

TypeError: a.lat is not a function
at oh.extend (main.js:34)
at Object.angular.module.service.fit (angular-google-maps.js:968)
at MarkerManager.angular.module.factory.MarkerManager.fit (angular-google-maps.js:2237)
at MarkerManager.bind as fit
at angular-google-maps.js:5015
at processQueue (angular.js:14634)
at angular.js:14650
at Scope.$get.Scope.$eval (angular.js:15878)
at Scope.$get.Scope.$digest (angular.js:15689)
at angular.js:15917

  <ui-gmap-google-map ng-if="render"
                        bounds="mapOption.bounds"
                        center="mapOption.center"
                        zoom="mapOption.zoom"
                        control="myGoogleMap">

        <ui-gmap-markers models="mapOption.markers" coords="'coords'" fit="true" click="onClick">
            <ui-gmap-window coords="mapOption.selected.coords" show="windowOptions.show" closeClick="closeClick()"
                            ng-if="isReportInfo('incident')">
                <div>
                    <span><b>Type:</b> {{mapOption.selected.type}} </span><br>
                    <span><b>Phone:</b> {{mapOption.selected.phone}} </span><br>
                    <span><b>Priority:</b> {{mapOption.selected.priority}} </span><br>
                    <span><b>Date:</b> {{mapOption.selected.timestamp | date:'H:mm, MM/dd/yyyy'}}</span>
                </div>
            </ui-gmap-window>
            <ui-gmap-window coords="mapOption.selected.coords" show="windowOptions.show" closeClick="closeClick()"
                            ng-if="isReportInfo('attendance')">
                <div>
                    <span><b>Employee:</b> {{mapOption.selected.employee}} </span><br>
                    <span><b>Employee Name:</b> {{mapOption.selected.employee_name}} </span><br>
                    <span><b>Date:</b> {{mapOption.selected.timestamp | date:'H:mm, MM/dd/yyyy'}}</span>
                </div>
            </ui-gmap-window>
            <ui-gmap-window coords="mapOption.selected.coords" show="windowOptions.show" closeClick="closeClick()"
                            ng-if="isReportInfo('form_submissions')">
                <div>
                    <span><b>Form Name:</b> {{mapOption.selected.form_name}} </span><br>
                    <span><b>Phone:</b> {{mapOption.selected.phone}} </span><br>
                    <span><b>Score:</b> {{mapOption.selected.score}} </span><br>
                    <span><b>Date:</b> {{mapOption.selected.timestamp | date:'H:mm, MM/dd/yyyy'}}</span>
                </div>
            </ui-gmap-window>
            <ui-gmap-window coords="mapOption.selected.coords" show="windowOptions.show" closeClick="closeClick()"
                            ng-if="isReportInfo('locations')">
                <div>
                    <span><b>Phone:</b> {{mapOption.selected.phone}} </span><br>
                    <span><b>Status:</b> {{getStatusDesc(mapOption.selected.status)}}</span><br>
                    <span><b>Date:</b> {{mapOption.selected.timestamp | date:'H:mm, MM/dd/yyyy'}}</span>
                </div>
            </ui-gmap-window>
            <ui-gmap-window coords="mapOption.selected.coords" show="windowOptions.show" closeClick="closeClick()"
                            ng-if="isReportInfo('panic_report')">
                <div>
                    <span><b>Phone:</b> {{mapOption.selected.phone}} </span><br>
                    <span><b>Date:</b> {{mapOption.selected.timestamp | date:'H:mm, MM/dd/yyyy'}}</span>
                </div>
            </ui-gmap-window>
            <ui-gmap-window coords="mapOption.selected.coords" show="windowOptions.show" closeClick="closeClick()"
                            ng-if="isReportInfo('scans')">
                <div>
                    <span><b>Site:</b> {{mapOption.selected.site}} </span><br>
                    <span><b>Checkpoint:</b> {{mapOption.selected.cp}} </span><br>
                    <span><b>Date:</b> {{mapOption.selected.timestamp | date:'H:mm, MM/dd/yyyy'}}</span>
                </div>
            </ui-gmap-window>
        </ui-gmap-markers>
    </ui-gmap-google-map>

[nmccready]

Sounds like window.google is not loaded yet. Did you load the API? We need the script side of this.

[nmccready]

Need more information too like which version your running against.

[nmccready]

Closing until reply.

[markmssd]

I just opened issue #1707 which is very similar to this one.

My ui-gmap-markers works without any errors, but ui-gmap-polylines throws some.

I am using the latest version, 2.3.0.

[lfreneda]

Any solutions for this? 😨

[boroth]

I'm running into this issue as well, any updates? Currently running v2.4.1.

I've tried formatting my coordinates as a LatLng object, as suggested in #1707, but it doesn't seem to work for these markers.

[boroth]

I FIGURED IT OUT!

In my case, I had added the following to the Array.prototype:

Array.prototype.equals = function (array) {
    // if the other array is a falsy value, return
    if (!array) {
        return false;
    }

    // compare lengths - can save a lot of time
    if (this.length != array.length) {
        return false;
    }

    for (var i = 0, l=this.length; i < l; i++) {
        // Check if we have nested arrays
        if (this[i] instanceof Array && array[i] instanceof Array) {
            // recurse into the nested arrays
            if (!this[i].compare(array[i])) {
                return false;
            }
        }
        else if (this[i] != array[i]) {
            // Warning - two different object instances will never be equal: {x:20} != {x:20}
            return false;
        }
    }
    return true;
};

This was causing the for loop in angular-google-maps.js:1046 to iterate over the equals property on the prototype. I'll work on a fix to verify that the point object is actually a LatLng object before extending the bounds. Stay tuned for a pull request.