Home OverlappingMarkerSpiderfier with angular4
Reply: 2

OverlappingMarkerSpiderfier with angular4

ANANDHU AJAYAKUMAR Published in 2017-12-06 11:06:36Z

I am trying to use OverlappingMarkerSpiderfier with leaflet in my angular 4 app. The module works fine in plain js and with angular 1.

But when i try to use it with angular 4, it gives me the error

ERROR ReferenceError: OverlappingMarkerSpiderfier is not defined

It was solved when I installed the overlapping-marker-spiderfier

npm i overlapping-marker-spiderfier

But then it gave an another error that

Uncaught ReferenceError: google is not defined

What should I do to get it working

Anandhu Ajayakumar
Anandhu Ajayakumar Reply to 2017-12-15 12:40:06Z

You can solve this issue by using the OverlappingMarkerSpiderfier javascript file for leaflet.You have to change the file in a way similar to the npm version of OverlappingMarkerSpiderfier for google map.


this['OverlappingMarkerSpiderfierLeafLet'] = (function() {
  if (this['L'] == null) {

at the beginning and export the module as

module.exports = this['OverlappingMarkerSpiderfierLeafLet'];

Then this can be used by importing the module and using it as same as you do in html

Manja Reply to 2017-12-07 06:37:09Z

First I assume that you have script tag with your google maps api included into index.html.

Do you have @types/googlemaps installed? If not try to install it with

npm install --save @types/googlemaps 

and then include folowing import into your component

import {} from '@types/googlemaps';

I hope this solves your problem. If not then try to declare this in your component

declare var google: any;
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.30904 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO