MarkerCluster.js:789: Uncaught TypeError: Cannot convert undefined or null to object

[vosecek]

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
• [x] iOS

cordova information:

branch-cordova-sdk 2.6.17 "branch-cordova-sdk"
com.googlemaps.ios 2.6.0 "Google Maps SDK for iOS"
cordova-open-native-settings 1.4.1 "Native settings"
cordova-plugin-advanced-http 1.11.0 "Advanced HTTP plugin"
cordova-plugin-ble-central 1.1.4 "BLE"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.3.0-beta-20180430-1841 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-insomnia 4.3.0 "Insomnia (prevent screen sleep)"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-ios-non-exempt-encryption 1.0.0 "ITSAppUsesNonExemptEncryption false"
cordova-plugin-network-information 1.3.4 "Network Information"
cordova-plugin-qrscanner 2.5.0 "QRScanner"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-swift-support 3.1.1 "SwiftSupport"
cordova-plugin-whitelist 1.3.3 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Current behavior: Console error: MarkerCluster.js:789: Uncaught TypeError: Cannot convert undefined or null to object

//console.log("-----> initialize");
keys = Object.keys(self._markerMap);

Check if self._markerMap is defined should help?

This happens sometimes once the map is assembled with clusters for the first time. Clusters are not drawn

[wf9a5m75]

Please share your project files on GitHub.

[wf9a5m75]

ping

[vosecek]

You have been invited to private repository. Map is created in src/providers/get-map-data-ex.ts, invoked by script in src/pages/map.ts.

[wf9a5m75]

Thank you for sharing your project. I checked your code briefly, and the code should work without problem. Please try the multiple_maps branch version.

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable ....

[wf9a5m75]

ping

[wf9a5m75]

ping

[vosecek]

Update to latest branch did not help, still sometimes fail to place clusters with markers for the first time. It is not regular, but occasionally. Can not provide more details.

[wf9a5m75]

Did you check the native logs when the app is crashed?

[vosecek]

App did not crash, just the map is not filled with clusters. Will try it inspect once more and let you know.

[wf9a5m75]

Ok.

I tell you one thing. The most common mistake of the markercluster is to provide invalid lat/lng, such as provide lat/lng is null or string.

Make sure you provide all valid lat/lng pairs.

  'position': {lat: el.latitude, lng: el.longitude}

[vosecek]

The problem occurs once map.clear() (Ionic Native plugin) is called on empty map. Maybe it is related with https://github.com/ionic-team/ionic-native-google-maps, but uncaught error comes from MarkerCluster.js.

[wf9a5m75]

How to make an empty map with marker cluster? MarkerCluster has at least two markers.

[wf9a5m75]

ping

[vosecek]

Preventing map.clear() on empty map has no effect. The problem persist even in version 2.3.1. You can see the data flow in repository. Sometimes are clusters created properly, sometimes occurs mentioned error.

Workaround is calling placeMarkers() a few seconds ago, which pass 10/10 cases. In 2 cases it helped, cause of error occurred.

[vosecek]

I believe that checking self._markerMap before converting Object.keys() would help.

[wf9a5m75]

Could you make 100% reproduce way? I'm super busy person, I can't spend much time for you

[YeisonVelez11]

@wf9a5m75

I apologize again for my ignorance, I managed to compile the application with the code of markerCluster and I get the same error of @vosecek .

I am getting this errors..:

http://prntscr.com/jig66f http://prntscr.com/jig6bw

In this repository you can download this code with the problem..

https://github.com/YeisonVelez11/errormaps my api key of google maps is contained in config.xml

to reproduce this error look please the next image (click on "mapa" on the bottom of the page): http://prntscr.com/jig96j

I took the code out of your documentation (the first piece of code): https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/class/MarkerCluster/README.md

This is the code that I am using and with which I get the same error.

`

var mapDiv = document.getElementById("map_canvas");
var options = {
    'camera': {
        'target': dummyData()[0].position,
        'zoom': 12
    }
};
var map = plugin.google.maps.Map.getMap(mapDiv, options);
map.on(plugin.google.maps.event.MAP_READY, function() {

  //------------------------------------------------------
  // Create a marker cluster.
  // Providing all locations at the creating is the best.
  //------------------------------------------------------
  var markerCluster = map.addMarkerCluster({
    markers: dummyData(),
    icons: [
        {min: 2, max: 100, url: "./img/i1.png", anchor: {x: 16, y: 16}},
        {min: 100, max: 1000, url: "./img/i2.png", anchor: {x: 16, y: 16}},
        {min: 1000, max: 2000, url: "./img/i3.png", anchor: {x: 24, y: 24}},
        {min: 2000, url: "./img/i4.png",anchor: {x: 32,y: 32}}
    ]
  });

});

function dummyData() {
  return [
    {
      "position": {
        "lat": 21.382314,
        "lng": -157.933097
      },
      "name": "Starbucks - HI - Aiea  03641",
      "address": "Aiea Shopping Center_99-115 Aiea Heights Drive #125_Aiea, Hawaii 96701",
      "phone": "808-484-0000",
      "icon": "./img/starbucks.png"
    },
    {
      "position": {
        "lat": 21.3871,
        "lng": -157.9482
      },
      "name": "Starbucks - HI - Aiea  03642",
      "address": "Pearlridge Center_98-125 Kaonohi Street_Aiea, Hawaii 96701",
      "phone": "808-484-0000",
      "icon": "./img/starbucks.png"
    }
  ]
}

in my template:

<div id="map_canvas" style="width:100%; height:100%"></div>

Can you help me please? this library is aweasome! `

Tested in Ionic1, nodejs v 8.9.0 windows 7 64 bits in Angular.js

thanks, you are a genious!

[wf9a5m75]

I will check this tomorrow

[wf9a5m75]

Try to remove this line

  <script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyBeUTjybXJSuk9FJavcOQPjYracUfrt4Og"></script>

[YeisonVelez11]

hey ... it seems to be solved !. thank you very much. I just deleted these libraries:

<script src="https://maps.google.com/maps/api/js?libraries=places&key="></script>
<script src="lib/markerclusterer.js"></script>  
<script src="lib/ng-map.min.js"></script>

I detected another problem. if when loading the app the home page is directly the map, I get this error:

http://prntscr.com/jillgm

ReferenceError: plugin is not defined

I am using the same code, but the first view is the controller and view of the map, This problem does not occur if I am previously redirected from another view in view of the map.

Do you know how I can solve it?

Again, thank you very much, I am impressed with your intelligence.

[wf9a5m75]

You have to wait deviceready

[wf9a5m75]

@vosecek ping

[YeisonVelez11]

@wf9a5m75 I regret to inform you that my problem persists .... the same error still occurs. my code is updated if you want to download

[YeisonVelez11]

http://prntscr.com/jig66f http://prntscr.com/jig6bw

[wf9a5m75]

What should I do?

[YeisonVelez11]

is the version of keyboard plugin.. I dont have this error, I will search a solution

[wf9a5m75]

$ cordova plugin list
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.3.2-beta-20180516-1521 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-keyboard 1.2.0 "Keyboard"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"

[YeisonVelez11]

try with this:

`

   if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
   cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}

`

[YeisonVelez11]

cordova-plugin-device 2.0.2 "Device" cordova-plugin-googlemaps 2.3.1 "cordova-plugin-googlemaps" cordova-plugin-inappbrowser 3.0.0 "InAppBrowser" cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview" cordova-plugin-keyboard 1.2.0 "Keyboard" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-whitelist 1.3.3 "Whitelist" I have the same :(

[wf9a5m75]

I reinstalled cordova-plugin-ionic-keyboard and the error is gone. But the menu is not closed.

[YeisonVelez11]

Exactly the same thing happens to me, I think this happens because of the problem that I mentioned to you in the images with markerCluster

[wf9a5m75]

I have no error.

[wf9a5m75]

[YeisonVelez11]

it's strange. I did this project to show you the error, and it does not happen here. in my real project I practically have the same thing and it happens. I thought that the menu had that problem because of the error.

[wf9a5m75]

You

cordova-plugin-googlemaps 2.3.1 "cordova-plugin-googlemaps"

me

cordova-plugin-googlemaps 2.3.2-beta-20180516-1521 "cordova-plugin-googlemaps"

[YeisonVelez11]

give me 5 minutes please

[wf9a5m75]

I think you just need to use ionic4 instead ancient ionic framework

[YeisonVelez11]

I think the same, but the learning line will take me a while and I need to take this project forward, for now I must do it in ionic1.

[wf9a5m75]

https://ionicframework.com/getting-started

Is this difficult? I don't think so.

[YeisonVelez11]

everything is a matter of time and practice. for now I need quick results. for now I am compiling with this version and I notice if it works. thanks

[wf9a5m75]

Regarding of the menu which is over the map, ionic1 displays the contents page using z-index, but this plugin displays under the browser.

So the menu is always displayed until you move out from screen.

[YeisonVelez11]

This is the reason why I am getting this problem?

[wf9a5m75]

I talked only the reason of menu bar stay over the map

[wf9a5m75]

I don't get any JS errors.

[YeisonVelez11]

I think this version solves the problem. I do not know what it was. but I'm worried about the menu topic, I do not know how to fix it.

[wf9a5m75]

That's why I recommend ionic4

[YeisonVelez11]

There is absolutely nothing I can do to fix it ?? I'm in serious trouble. My design contemplates the menus in this way. I have no idea how to fix it :( :( :(

[wf9a5m75]

I only support maps plugin. Ionic problem is not my coverage.

[YeisonVelez11]

I think I discovered something interesting to fix :) By the way, thank you very much. you are very kind, you are a god level programmer

[wf9a5m75]

Ok, good luck. Enjoy the maps plugin.

---

Thank you for considering to support the activity of cordova-plugin-googlemaps https://github.com/mapsplugin/cordova-plugin-googlemaps#buy-us-a-beer