Base64 Encoded Icon cannot read property width of undefined

[Binitronics]

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

• [ ] question
• [x ] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x ] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

TypeError: Cannot read property 'width' of undefined
zone.js:690
message:"Cannot read property 'width' of undefined"
stack:"TypeError: Cannot read property 'width' of undefined
    at Map.<anonymous> (http://localhost/plugins/cordova-plugin-googlemaps/www/Map.js:1487:63)
    at http://localhost/plugins/cordova-plugin-googlemaps/www/commandQueueExecutor.js:63:21
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost/polyfills.js:3492:30)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost/polyfills.js:3249:47)
    at http://localhost/polyfills.js:3997:38
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost/polyfills.js:3527:35)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost/polyfills.js:3294:51)
    at drainMicroTaskQueue (http://localhost/polyfills.js:3707:39)"

**If you use `@ionic-native/google-maps`, please tell the package.json (only `@ionic-native/core` and `@ionic-native/google-maps` are fine mostly)**
    "@ionic-native/core": "^5.28.0",
    "@ionic-native/device": "^5.28.0",
    "cordova-android": "^8.1.0",
    "cordova-androidx-build": "^1.0.4",
    "@ionic-native/google-maps": "^5.27.0-beta-20200630",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",

Current behavior:

Adding a marker using Base64 format produces an error. The marker is shown on the map as expected but the error mentioned above is produced.

Expected behavior:

The marker should be draw on the map with out producing error.

Screen capture or video record:

Related code, data or error log (please format your code or data):

  loadMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': '(your api key for `https://`)',
      'API_KEY_FOR_BROWSER_DEBUG': '(your api key for `http://`)'
    });

    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);
// let icon='blue';
 let icon=  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACVUlEQVRIS8WWjVXCMBRGwwTqBMIEuAG4ARuIE6gTKBOgEyAT4AbABjKBMIE/C+h3m6S2pWlJ8BzfOTkpad6770teEzom3bZy/VbrpYTopDjJZ6w2c77X6p9j46SCUXvuYDxHq04BZ2rPHXa3y/DRqlPAmdqZW+hrkMZEq44F52q3oGTdrjEpqmPBudoxKVBVKqsU1THgPbW+klNUt4GHCn6idqEGuMveerUeXFGtNTCvah9qaz+n2gMmKMGBnLrfjPFcMirZ7231XUF19RUJkIhPZqXnT8AM9Osy62v0VPihUqIfjWwx1RkJvbxIpjArhabfbEJ6zQYwysiiT3CW8kJ6Q4BgqMALEnqVNAqQZGSkM/R7nMOBLhZ/B/ZQeg9V/1EsrpLy5dIqP8aAXV6WlQIlZrWq/wzeBK0DM3Y0vA0aAh8FPwTaBC7B2W8+qUOMT4l9dYUUrJK2k4tCOHl7O7zK+Xx69nbWU/iebgKz1+9E+OYPToR1fqOe+SquujeBWdzlYGBPohhjW9b2lGbRa72bwLdyml5d2auvaPyeTOzIw4MxzCkal8h8no3cqT3WJd0ExuFmOjXmlhRIXbnfKZQ7hfJ4HDTM8wVIMi6xJ01y3mV8E5glGlDRGIEKS75DrAtFn/0DA3x/b0ddZbPgGt23JnBW0agpKPzUGCvhoT4iv1HG9Zodtc6HGBTYnoXAXc3UR5SbBwK1d8y+8RUAzxNwU2orOwQeyolF/lLT7mUqQ8BqCj4Bt+j1lR0Cs3Sopt8GFLYNF/2JU7K2k6stePL7fwP/AER2xy+mY1/QAAAAAElFTkSuQmCC';
    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: icon,
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }
}`

[wf9a5m75]

Please send a pull request.

[Binitronics]

Sorry for the late reply. I was away for a while. The thing is, I used your own code. I just replaced icon with Base64 icon. In my opinion you can test it with your existing project.

[wf9a5m75]

Hmm, that's not welcome answer. Open Source Code is for open to contribute by everyone. Error report, claiming, etc, .... well, better than nothing, but you take other person's time. Most of the case, you take the developer's time. Then open source library would die. So, word like "test your self!" means you kill the open source software. If you like/love the software (not only this plugin), please contribute no matter what any formation.

[Binitronics]

Hey, I am really sorry if that sounds "test it your self". I think we miss understand to some how. I just copy your code and encounter a problem. Instead of sending your code again, in my opinion it is better to tell you the exact problem. That was my intention. I do like this plugin and it is my pleasure to contribute if possible. If my project helps, It is my pleasure to share it with you. Please see my project here

[Binitronics]

Any update on this issues?

[wf9a5m75]

Unfortunately there is no enough time to work on this (not only this, but all others) at all.

[Binitronics]

Thanks for your honesty. Ionic links this plugin in their website officially and they didn't support it actively ?

[wf9a5m75]

ionic/google-maps plugin is kind of different history than others. Basically, no support.

This plugin is a wrapper plugin for cordova-plugin-googlemaps. But cordova-plugin-googlemaps is very complicated plugin, then there were so many bugs in the ionic/google-maps plugin. Because of this, I had to fix this plugin, and I was really stressful because I couldn't control the release timing.

Then this plugin is spin out from the control under the ionic team, and I maintenance this plugin directly. That's why no support.

---

Since all source code is open, you can debug the code by yourself.

[battika]

I have the same error appearing in my app but it seemed to work so I was not too worried about it. I even did not know it was caused by the base64-encoded icon but at least I'm aware now. @Binitronics apart from the error in the console are you experiencing any issues?

[Binitronics]

I have the same error appearing in my app but it seemed to work so I was not too worried about it. I even did not know it was caused by the base64-encoded icon but at least I'm aware now. @Binitronics apart from the error in the console are you experiencing any issues?

The only issue I encountered is the error on the console. The icon is drawn as expected.

[Binitronics]

Just one opinion. I have seen that people encounter some issues and you askes them to share their project folder (on github for example). You said "Unfortunately there is no enough time to work on this (not only this, but all others) at all." If you don't have any time, it is probably a good idea to stop asking people to share their project. Even, it is good to inform users that this plugin is not actively maintained before they spend their time (could be in your readme file).

[alicarlo]

I have been using this plugin for 2 years and it is excellent I appreciate your time and effort @wf9a5m75

This error appeared in the latest version that is in git since I have other maps working without problems, check your code fragment, simply define the width of your icon and you will no longer see the undefined error in console, I hope it helps you, excuse my spelling excellent day @Binitronics

 icon: {
              url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACVUlEQVRIS8WWjVXCMBRGwwTqBMIEuAG4ARuIE6gTKBOgEyAT4AbABjKBMIE/C+h3m6S2pWlJ8BzfOTkpad6770teEzom3bZy/VbrpYTopDjJZ6w2c77X6p9j46SCUXvuYDxHq04BZ2rPHXa3y/DRqlPAmdqZW+hrkMZEq44F52q3oGTdrjEpqmPBudoxKVBVKqsU1THgPbW+klNUt4GHCn6idqEGuMveerUeXFGtNTCvah9qaz+n2gMmKMGBnLrfjPFcMirZ7231XUF19RUJkIhPZqXnT8AM9Osy62v0VPihUqIfjWwx1RkJvbxIpjArhabfbEJ6zQYwysiiT3CW8kJ6Q4BgqMALEnqVNAqQZGSkM/R7nMOBLhZ/B/ZQeg9V/1EsrpLy5dIqP8aAXV6WlQIlZrWq/wzeBK0DM3Y0vA0aAh8FPwTaBC7B2W8+qUOMT4l9dYUUrJK2k4tCOHl7O7zK+Xx69nbWU/iebgKz1+9E+OYPToR1fqOe+SquujeBWdzlYGBPohhjW9b2lGbRa72bwLdyml5d2auvaPyeTOzIw4MxzCkal8h8no3cqT3WJd0ExuFmOjXmlhRIXbnfKZQ7hfJ4HDTM8wVIMi6xJ01y3mV8E5glGlDRGIEKS75DrAtFn/0DA3x/b0ddZbPgGt23JnBW0agpKPzUGCvhoT4iv1HG9Zodtc6HGBTYnoXAXc3UR5SbBwK1d8y+8RUAzxNwU2orOwQeyolF/lLT7mUqQ8BqCj4Bt+j1lR0Cs3Sopt8GFLYNF/2JU7K2k6stePL7fwP/AER2xy+mY1/QAAAAAElFTkSuQmCC',//url+elementItems.icon.path,
              size: {
                  width: 60,
                  height: 60
               }
             }

[Binitronics]

Hi @alicarlo thanks for your reply. As I said before I admire @wf9a5m75 work and I am grateful for this plugin.