mapsplugin / cordova-plugin-googlemaps

Google Maps plugin for Cordova
Apache License 2.0
1.66k stars 918 forks source link

Browser: Uncaught (in promise) TypeError: 'get' on proxy: property '_cmdQueue' #2854

Closed kaddyadriano closed 3 years ago

kaddyadriano commented 3 years ago

I'm submitting a ... (check one with "x")

OS: (check one with "x")

cordova information: (run $> cordova plugin list)

cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-whitelist 1.3.4 "Whitelist"

Current behavior:

Throws an error when adding a marker to map

Expected behavior:

Add a marker to map

Related code, data or error log (please format your code or data): I have tried to use the sample you have on here but the following error was thrown still

Overlay.js:105 Uncaught (in promise) TypeError: 'get' on proxy: property '_cmdQueue' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<BaseArrayClass>' but got '[object Object]')

Here is part of may code:

this.$maps = plugin.google.maps;
this.mapDiv = document.getElementById('map');

//....

renderMap(){
    let cameraOptions = {target: {lat: this.currentLocation.lat, lng: this.currentLocation.lng}, zoom: this.zoom};
    let options = {
        camera: cameraOptions,
        controls: {
            compass: false,
            myLocationButton: false,
            indoorPicker: false,
            zoom: false
        }
    };
    this.map = this.$maps.Map.getMap(this.mapDiv, options);
    this.map.one(this.$maps.event.MAP_READY, this.renderMarkers.bind(this));
}

//....

renderMarkers(){
    let bounds = [];
    let markers = this.mapMarkers.map(marker => {
        let icon = require('./assets/pin.svg');
        let markerOptions = {
            position: {
                lat: Number(marker.Latitude),
                lng: Number(marker.Longitude)
            },
            title: marker.LabelText,
            icon: icon
        };
        bounds.push(markerOptions.position);
        return this.map.addMarker(markerOptions); //The error is thrown here
    });

    if(bounds.length) this.map.moveCamera({ target: bounds });

}
wf9a5m75 commented 3 years ago

Please explain the steps how to reproduce your issue

kaddyadriano commented 3 years ago

Please explain the steps how to reproduce your issue

I get the error when adding a marker to the map. I have updated the post/comment with a code snippet. I haven't figure out what the issue is. Your help will be appreciated!

wf9a5m75 commented 3 years ago

svg is not supported

wf9a5m75 commented 3 years ago

Please try without icon

        let markerOptions = {
            position: {
                lat: Number(marker.Latitude),
                lng: Number(marker.Longitude)
            },
            title: marker.LabelText
        };
kaddyadriano commented 3 years ago

I have tried without it but still getting the same error. here is my console output Screen Shot 2021-02-12 at 5 14 01 PM

wf9a5m75 commented 3 years ago

Could share your project files on GitHub? I don't mind public or private. I can't figure out without your code.

kaddyadriano commented 3 years ago

I created a sample project and the map worked there so I figured the map obj this.map was being tampered with somehow. I finally got it to work. Thanks for your looking into this!

Question: Is there a way to add a marker label (label on icon) like google maps js does. something like let makerOptions: {icon:.., title:.., label: "My Label"} ?