jawj / OverlappingMarkerSpiderfier

Deals with overlapping markers in Google Maps JS API v3, Google Earth-style
http://blog.mackerron.com
838 stars 237 forks source link

OverlappingMarkerSpiderfier is not a constructor #138

Open sabun123 opened 7 years ago

sabun123 commented 7 years ago

I get "OverlappingMarkerSpiderfier is not a constructor" with my Google Maps web application. When this happens, naturally everything and anything after this is royally screwed up and ceases functioning on the page.

At first I was initializing OMS at the end after the map init, after having set all events. From a quick Google, the rule of thumb seems to be that Google Maps must be fully loaded before initializing or using OMS. So I tried the following.

What I've tried:

  1. Using $(document).ready()
// Initialize OMS after the DOM tree is ready
$(document).ready(function () {
    // Initializing OMS
oms = new window.OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      keepSpiderfied: true,
      nearbyDistance: 10,
      circleFootSeparation: 60,
      legWeight: 1.5
    });
  });
  1. Using window.onload
    
    function initOMS(){
    // Initializing OMS
    oms = new window.OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      keepSpiderfied: true,
      nearbyDistance: 10,
      circleFootSeparation: 60,
      legWeight: 1.5
    });
    }

// Initialize OMS after the Window is fully loaded window.onload = initOMS();



Neither of these seem to work though. Sometimes OMS will be fine, sometimes it will give out the console error "OverlappingMarkerSpiderfier is not a constructor".

This is on:
**Chrome Version 60.0.3112.113**
sabun123 commented 7 years ago

Ok, I seem to have found a working solution. Initialize OMS in Google Map's IDLE event. This seems to be the exact time Google Map's first registers that it's fully loaded and ready to go (as far as Google can tell me).

Solution:

var doOnce = true;

function initOMS(){
    // Initializing OMS
    oms = new window.OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      keepSpiderfied: true,
      nearbyDistance: 10,
      circleFootSeparation: 60,
      legWeight: 1.5
    });
  }

window.google.maps.event.addListener(map, "idle",()=>{
        // Do Once. Init OMS library
        if(doOnce){
            initOMS();
            doOnce = false;
        }
});

Hopefully this helps anyone else who attempts to Google this problem similar to mine. To the developers, if there is a better way, I'm all ears! I appreciate the library, it's very cool.