Utilizing OverlappingMarkerSpidifier in conjunction with sebm-angular2-google-map

I'm currently integrating OverlappingMarkerSpidifier using SebM Angular 2 Google Maps on angular2 2.0.0.

After successfully loading the google maps API with the GoogleMapsAPIWrapper imported from the sebm module, I am running into an issue when executing the OMW script that I downloaded from the repository and added a module.exports statement to. The error message I'm encountering is:

Uncaught TypeError: this.constructor.ProjHelper is not a constructor

Below is the code snippet of the OverlappingMarkerSpiderfier (OMW) code:

/** @preserve OverlappingMarkerSpiderfier
https://github.com/jawj/OverlappingMarkerSpiderfier
Copyright (c) 2011 - 2013 George MacKerron
Released under the MIT licence: http://opensource.org/licenses/mit-license
Note: The Google Maps API v3 must be included *before* this code
 */

module.exports = function () {

  // Code implementation for OverlappingMarkerSpiderfier here...

};

Here's how I'm attempting to use the OverlappingMarkerSpiderfier function in my code:

let omw = require('../../scripts/overlapping-marker-spidifier.js');
this.overlappingMarkerSpidifier = omw()(this.map);

I have tried to delay the execution of the script until it's required and then manually call it to expose the OverlappingMarkerSpiderfier function. Can anyone provide guidance on how to resolve this issue?

google-mapsangulartypescriptwebpack

Answer №1

After much effort, I have successfully implemented this solution with several steps involved.

To begin, incorporate and customize the overlapping marker spiderifier script

Create a specific file within your project containing the modified OMS script shared below.

If you opt to manually build the project, follow these steps:

  • git clone https://github.com/jawj/OverlappingMarkerSpiderfier.git
  • cd OverlappingMarkerSpiderfier
  • Open bower.json and update the url for devDependency closure-compiler to 
    //dl.google.com/closure-compiler/compiler-20131014.zip
  • run npm run dist
  • open lib/oms.js and modify the file to export the function as shown in the code snippet below:

/** @preserve OverlappingMarkerSpiderfier https://github.com/jawj/OverlappingMarkerSpiderfier Copyright (c) 2011 - 2013 George MacKerron Released under the MIT licence: Note: The Google Maps API v3 must be included before this code */

module.exports = function () {

  // Implementation details here...
  
};

Integrate the OMS script into your component utilizing sebm-google-map

Add the following property reference to your component that leverages the sebm-google-map component:

let oms = require('../../scripts/overlapping-marker-spidifier.js');

Access the native map, marker manager, and markers

Develop a new directive to obtain the native map object, the marker manager, and the markers. It should be nested inside the sebm-google-map component structure as outlined:

<my-parent-component>
    <sebm-google-map>
        <get-google-map (map)="setMap($event)" (markerManager)="setMarkerManager($event)" (markers)="setMarkers($event)">
            <sebm-google-map-marker ... ></sebm-google-map-marker>
        </get-google-map>
    </sebm-google-map>
</my-parent-component>
...continuing with the instructions from the original text...

That's the process! If you need further clarification or assistance, feel free to ask.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to accurately capture the values from checkboxes and dropdown selections to ensure the correct data is displayed. Assistance is needed in this

I am facing challenges in retrieving the accurate data for display from Mat-Select and Mat-Checkbox components. My goal is to capture the selected values from users and perform if-else statements to validate conditions, displaying the correct data view if ...

javascripthtmlangularangular-material

In TypeScript, Firestore withConverter may return a QueryDocumentSnapshot instead of the expected Class object

I'm currently exploring the usage of Firestore's withConverted method in Typescript to retrieve queries as instances of my customized class. Custom EventConverter Class import Event from "@/models/Event"; class EventConverter implemen ...

typescriptfirebasegoogle-cloud-firestore

Is there a way to close a window in JavaScript that was opened using Ionic Capacitor?

Currently, I am trying to open a window within my Ionic app by using the code snippet below: await Browser.open({url: environment.apiUrl + `/myurl`}); However, upon completion of a certain action by the user, I want to close that same window. Unfortunate ...

angularionic-frameworkionic-nativecapacitor

Is it possible for TypeScript to convert a generic enum type into a string at runtime?

Enumerations and interfaces are an important part of my codebase: enum EventId { FOO = 'FOO', BAR = 'BAR', } interface EventIdOptionsMap { [EventId.FOO]: { fooOption: string; }, [EventId.BAR]: { barOption: number; } ...

typescriptenumstypescript-generics

After updating the file path, the Next.Js module couldn't be located: Module not found – Unable to

After relocating the EmptyTable.tsx file from its original directory at views/forms-tables/tables/react-table/EmptyTable to a new location at components/Tables/EmptyTable, I encountered a persistent issue. Despite updating the import path in my code to mat ...

reactjstypescriptnext.js

Having trouble with the clip-path in d3.js liquid fill gauge

Attempting to integrate the d3.js liquid fill gauge into my angular2 webapp has been a challenge. The clippath functionality seems to be malfunctioning, resulting in no wave being generated at all. https://i.stack.imgur.com/3Bmga.png instead of https://i. ...

javascriptd3.jstypescriptangular

The icon for the ng-bootstrap datepicker calendar is not showing up

I recently implemented a date picker using angular-cli and ng-bootstrap. The datepicker is working perfectly after installing it from npm and adding it to the main module. However, I am facing an issue with the icon not displaying properly. Check out the ...

angulardatepickerng-bootstrap

Troubleshooting problems with styling in Angular Material's mat-select component

In my project, I am using Angular 8.0.0 along with Angular Material and the Fuse Theme as an admin panel. The issue I am facing is that every time I change the style of a mat-select component, it initially gets applied but after one or two refreshes, Angul ...

angularsassstyles

Angular library modules for node packages

After developing my latest library, I noticed some red underlines: https://i.stack.imgur.com/ffAjI.png In this package, I plan to incorporate other npm packages like ionic and crypto. I attempted to update the package.json within the library: { "name ...

javascriptnode.jsangularnpm

NextJS 13 causes tailwind to malfunction when route group is utilized

I've encountered an issue in my NextJS 13 application where Tailwind classes are no longer being applied after moving page.tsx/layout.tsx from the root directory to a (main) directory within the root. I suspect that there may be a configuration that i ...

javascriptreactjstypescriptnext.jstailwind-css

A dynamic d3 line chart showcasing various line colors during transitions

I have implemented a d3 line chart using this example as a reference: https://codepen.io/louisemoxy/pen/qMvmBM My question is, is it possible to dynamically color the line in the chart differently based on the condition y > 0, even during the transitio ...

typescriptd3.jslinechart

Multiple components are returned with switch case

I am trying to iterate over an object and display a result based on Object.entries. However, the loop currently stops at the first return statement. Is there a way for me to capture and display all components returned simultaneously, perhaps using a vari ...

javascriptreactjstypescript

Convert HTML Form to PDF or Docx with Angular 4

My current setup involves Angular 4 with Node and MySQL. I have a form that, upon submission, needs to trigger a Save As... dialog box for the user to save the entered form contents as either a PDF or Word Doc. I've attempted using htmlDox and saveAs ...

jquerynode.jsangular

The utilization of TypeScript featuring a variable that goes by two different names

As I dive into TypeScript code, coming from a Java background, I struggle to grasp the syntax used in this particular example. The snippet of code in question is extracted from the initial Material UI Select sample: const [labelWidth, setLabelWidth] = Rea ...

reactjstypescript

Exploring GeoPoints on Android

I am currently working on an Android application where I need to display a route on Google Map using a JSON array that looks like this: JSONArray.getString("points") = ["-33.45591917507404, -70.59198361376951","-33.453484420618416, -70.61635952929686"] I ...

androidjsongoogle-maps

No errors encountered during compilation for undefined interface object types

Hey there, I'm currently exploring the Vue composition API along with Typescript. I'm facing an issue where I am not receiving any errors when an interface does not align with the specified types for that interface. Although my IDE provides aut ...

typescriptvue.jsvuejs3type-hintingvue-composition-api

Using the up and down arrow keys on the keyboard to navigate through a mat-form-field-infix field in

Is there a way to simulate keyboard inputs for the up and down buttons in a drop-down list while working with mat-form-field-infix? I attempted using Robot framework, but it seems that the drop-down list does not appear unless I manually interact with it ...

javaangularseleniumautomation

The UI elements are failing to reflect the changes in the data

In an attempt to establish communication between three components on a webpage using a data service, I have a Create/Edit component for adding events, a "next events" component for accepting/declining events, and a Calendar component for displaying upcomin ...

angulartypescriptrxjsangular6

Leverage the power of TypeScript with knockout's pureComputed function

I am facing an issue with referencing the this object in a function called problem: const c = { f() { console.log("hi"); }, problem: ko.pureComputed(() => { return this.f(); }), }; [ts] The containing arrow function captures the glob ...

typescriptknockout.js

Is there a possibility in TypeScript to indicate "as well as any additional ones"?

When working with typescript, it's important to define the variable type. Consider this example: userData: {id: number, name: string}; But what if you want to allow other keys with any types that won't be validated? Is there a way to achieve thi ...

typescript