Once the GeoJson data is loaded with map.data.loadGeoJson, the circle events are obscured by the polygons from the

When I use map.data.loadGeoJson() to load a Geo Json file, the markers and circles on my map are being covered by polygons and their events cannot be clicked. Below are some sample codes for reference. How can this issue be resolved? Is there another way to disable the "clickable" property of these polygons? Thank you.

map.data.loadGeoJson(samplejson.json);
 // Add circle overlay and bind to marker
                var circle = new google.maps.Circle({
                    map: map,
                    radius: 1600, // 10 miles in metres
                    fillColor: fill_color_val,
                    strokeColor: '#F5F5F5',
                    strokeWeight: 2,
                    fillOpacity: 1,
                });

                var marker = new google.maps.Marker({
                    position: latlng,
                    title: data[i].Author,
                    draggable: false,
                    map: map
                });
                marker.setVisible(false);

                circle.bindTo('center', marker, 'position');

                var infoWindow = new google.maps.InfoWindow({
                    content: "<div>Hello! World</div>",
                    maxWidth: 500
                });
                google.maps.event.addListener(circle, 'click', getInfoCallback(latlng, 14));

Answer №1

Apply z-index to other layers so they are not blocked by the map.data layer.

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

Fade in and out MaterialUI text using useEffect in combination with setInterval

I have implemented a text carousel using MaterialUI's Fade component. The carousel displays text from an array provided in a prop called dataArray. To achieve the carousel effect, I am toggling the boolean value of the Fade component and updating the ...

Learn how to efficiently reload a card in React upon submitting new data

Is there a way to automatically refresh the card component after submitting data without having to manually refresh the page? I've tried using useEffect but it's not updating the data even though the value is changing. Any suggestions on how to r ...

Trouble Displaying DHtmlX Scheduler Events on Safari and Internet Explorer

I have recently embarked on the journey of building a nodejs application and decided to incorporate DHtmlX Scheduler as my calendar. To my dismay, I encountered an issue where the events are not displaying on Safari or IE, despite working perfectly fine on ...

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

I am looking to implement a button that will wrap content with all tags. Snippet of Code: editor.addButton('MobileToggleArea', { text: '<M>', icon: false, onclick: function (){ editor.selection. ...

The port has not been defined

My Node server appears to be operational, however the console is displaying an error message stating that the port is undefined. const express = require('express'); const env = require('dotenv') const app = express(); env.config(); ap ...

Registering your phone with Gigya

Currently, I am utilizing Gigya as the single sign-on system for my iOS application. It has been successfully integrated, allowing users to log in using their Twitter, Facebook accounts, or through manual email registration. However, due to the limitation ...

Using JavaScript to Transmit URL

Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...

What is the best method of converting a data frame with multiple columns to JSON in R?

Looking to convert a data frame into a JSON format, here is what the data frame looks like: dput(head(yyy,30)) structure(list(name = c("serverA", "serverA", "serverA", "serverA", "serverA", "serverA", "serverA", "serverA", "serverA", "serverA", "serverA ...

Error encountered while rendering content in an Angular template

I'm currently integrating ngx-carousel into my application. Interestingly, the carousel works perfectly when I manually input the data. However, when trying to fetch the data from the server, it fails to work as expected. Take a look at my code snip ...

Tips for validating forms using jQuery

Upon form submission, an alert is displayed before redirecting to a new page. I have implemented a function that triggers on button click. The alert will appear first, followed by the form submission. I would appreciate ideas on how to validate the form. ...

Why does trying to package a Windows app on OSX prompt a request for Wine installation?

For several months, I have been successfully utilizing Electron on macOS (10.11.6) to create and package both OSX and Windows applications. My current setup includes electron v1.7.3 and "electron-packager" "^8.5.2", all of which have not been updated in a ...

"Stellar.js fails to function properly when applied to elements loaded dynamically through AJAX requests

I recently implemented the amazing Stellar.js for parallax effects in a project of mine. However, I've encountered an issue: Stellar.js does not recognize when I update content via AJAX (specifically loading new div elements from an HTML file and rep ...

Is there a way to animate without specifying a duration?

Exploring the capabilities of the Animated component in react-native, I came across the powerful Animated.timing(); function which operates within a specific duration defined as duration: 2000,. While duration is useful in certain scenarios, I found myself ...

The initialized Javascript array solely consists of undefined elements, without any of the expected values

I was under the impression that I knew how to declare JavaScript arrays, but in this particular script, I seem to be stuck in an infinite loop of undefined elements within the array. In my code, I define three arrays containing numbers—two with multiple ...

Command in Selenium Webdriver for initiating a mouse click

Currently, I am in the process of writing tests for a Java application that has been created with the Vaadin framework. To conduct these tests, I have opted to utilize the Robot Framework. In certain instances, I must implement robot framework commands suc ...

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

I plan to create a program for implementing Gauss Seidel and store each iteration in a single JSON file

Seeking help with creating a program for implementing Gauss Seidel and saving each iteration to JSON. Currently, my code only saves the final iteration, not each one. import json iteration={ "iterasi":None, "x1":0, " ...

My current objective is to extract the information from a specific item within a combobox by implementing the following code

alert($("select[name="+this.name+"] option:selected").text()); However, I am not receiving any output unless I explicitly specify the name of the combobox instead of using this.name. This issue may be related to the way quotes are being handled. ...

Implementing pagination with complete page information using node.js and mongodb

Hello, I am currently working on implementing pagination in NodeJS and MongoDB. Check out the code I have written below: router.get("/PO_pagination", verify, async (req, res) => { console.log("req.query", req.query) try { let ...

transforming JSON into CSV structure

I am attempting to utilize a JSON file as input data. Below is an excerpt of sample data. [ { id: 1671349531, name: "A Wild Restaurant Expansion", blurb: "We are looking to expand from our current location to a new and better facility...", goal: 17000, pl ...