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

A convenient utility for generating React components with pre-populated Tailwind CSS classes

When it comes to extracting local Tailwind-styled components, I tend to do it like this: const Container: React.FC = ({ children }) => ( <div className="bg-white px-5 py-5"> {children} </div> ); To simplify this process, I ...

reactjstypescripttailwind-css

When selecting a different file after initially choosing one, the Javascript file upload event will return e.target as null

Currently, I have implemented file uploading using <input>. However, when attempting to change the file after already selecting one, the website crashes and states that event.target is null. <Button label="Upload S3 File"> <input ...

javascriptreactjstypescriptreact-hooks

The useParams() method results in a null value

When attempting to utilize the useParams() hook in nextjs, I am encountering an issue where it returns null despite following the documentation. Here is my current directory structure: pages ├── [gameCode] │ └── index.tsx Within index.tsx ...

javascriptreactjstypescriptnext.js

I encountered login issues when trying to access dist/index.html in my Angular 8 application, but I found a workaround by utilizing the proxy.conf.json file, which

I have been trying to login through the index.html page in the angular 8 dist folder, but I keep encountering an error with the login API URL. Despite spending two days on this issue, I have not been able to find a solution. If anyone has any suggestions o ...

javascriptangularnpmwebpackwebpack-dev-server

Displaying an error message following the dynamic retrieval of the input field's value

How can I display an error message when a specific field with a value of 0 is not filled out in my Angular reactive forms? In my form, I have added a dropdown which is mandatory and I have implemented validators to ensure it is required. The validator work ...

angulartypescriptforms

What could be causing my date variable to reset unexpectedly within my map function?

Currently, I'm utilizing a tutorial to create a custom JavaScript calendar and integrating it into a React project You can find the functional JavaScript version in this jsfiddle import { useState, useRef, useMemo } from 'react' import type ...

javascriptreactjstypescriptreact-hooksnext.js

Encountering issues importing 'angulars/router' into Plunker environment

I'm encountering an issue with Plnkr when trying to import the router class in my project import {Component} from '@angular/core' import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; An error messag ...

angular

cssclassName={ validatorState === RIGHT ? 'valid' : 'invalid' }

Is there a way to dynamically add different classes based on validation outcomes in React? My current implementation looks like this: className={ validatorState === RIGHT ? 'ok' : 'no' } However, I also need to handle cases where the ...

javascriptreactjstypescript

When attempting to update Ionic2 from BETA11 to RC0, the error "bundle failed: 'InMemoryBackendService' is not exported" was encountered

An error occurred while bundling the application: 'InMemoryBackendService' is not exported by node_modules\angular2-in-memory-web-api\index.js (imported by src\app\app.module.ts). For assistance with resolving this ...

angularnpmupgradeionic2

Improve performance by minimizing JavaScript execution time with NextJS

Currently, I am working on improving the Lighthouse page speed ranking for my website. I recently made the transition from SSR with nginx caching to using next export along with exportPathMap and getInitialProps (still utilizing nginx caching). One specif ...

reactjswebpacknext.jspagespeedlighthouse

Error: Vue Prop is undefined and cannot be utilized within a v-for loop when using TypeScript and decorators

Hey there, I'm currently utilizing Vue along with typescript and facing an issue with props in v-for where it's not rendering anything. Check out the code snippet below for reference I've experimented with computed props, setting default va ...

typescriptvue.jsvue-componenttypescript-decorator

Displaying sorted objects from Angular serviceIn Angular 8, let's retrieve an object

In my Angular8 application, I am running a query that fetches a data object. My goal is to sort this data object based on the order value and then display each product item on the browser. For example, here is an example of how the output should look like ...

javascriptangulartypescriptdictionaryobservable

Is there a way to showcase just the month in one spot when presenting data using Angular 13?

Just starting out with Angular and facing a challenge in the Milestone section. There is a loop for displaying years and months, but I need to ensure that the month name is displayed only once for each specific year. Can someone provide me with a possible ...

angulartypescriptfor-loopforeachnested-for-loop

Naming convention for TypeScript accessors

Expanding on the previous solution When I convert the example object to JSON from the answer above: JSON.stringify(obj) The output is: {"_id":"3457"} If I intend to transmit this data over a service and store it in a database, I prefer not to use the ...

typescriptnaming-conventions

TypeScript and Redux mapDispatchToProps are not in sync

Below is my React component written in TypeScript: import React from 'react'; import {connect, ConnectedProps} from 'react-redux'; import logo from './assets/logo.png'; // import { Counter } from './features/counter/Count ...

typescriptreact-redux

Encountering a 504 Gateway Timeout error while attempting to send a POST request to an API route in a NEXT.JS application that

I encountered a 504 error gateway timeout when attempting to post a request to api/webhooks, and in the Vercel log, I received a Task timed out after 10.02 seconds message. This code represents a webhook connection between my clerk and MongoDB. [POST] [m ...

reactjstypescriptnext.jsvercel

Is there a way to make the Sweetalert2 alert appear just one time?

Here's my question - can sweetalert2 be set to only appear once per page? So that it remembers if it has already shown the alert. Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, ...

htmlangulartypescriptmodal-dialogsweetalert2

Guidance on retrieving state and city information using placeid within Google Maps API with AngularJS

Is there a way to retrieve the state and city information using a place_id? I am looking to extract the state and city based on the given place_id. You can refer to this link Google_map, where I need to find out the state and city of the specified place_i ...

angularjsgoogle-maps

Rule of authentication using Firebase Database

I need to establish a rule in my Firebase Database to prevent unauthorized access for reading and writing purposes. Within my database, there is a collection of words, each containing a "uid" field that corresponds with the uid of the authUser key stored ...

typescriptfirebasefirebase-realtime-databasefirebase-authenticationfirebase-security

Trigger event with stream as data

I have a front-end application built with Angular that uses ngrx/store to manage the state of the application. In the main component of my application, I am trying to trigger an action to control the visibility of a sidebar in the application state. Curre ...

angularreduxrxjsngrxngrx-effects