Picking Layers on Google Maps with Three.js

I have incorporated the google-maps-api-threejs-layer library into my project from this source. Now, I am looking to implement a picking feature.

Here is the modified code snippet:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Integrating Three.js Layer with Google Maps API</title>
    <style>
      html, body, #map-div {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="data.js"></script>
    <script src="styles.js"></script>
    <script src="../lib/detector.js"></script>
    <script src="../lib/dat.gui.js"></script>
    <script src="../lib/three.js"></script>
    <script src="../threejs-layer.js"></script>

    <script>
      // JavaScript code including initialization and interaction with the threejs-layer library
    </script>

  </head>

  <body>
    <div id="map-div"></div>
  </body>
</html>

Utilizing the raycaster to achieve a picking feature, I recommend checking the latest version of the three.js library here.

However, there is an issue when clicking near the geometries where elements outside the boxes are intersected. I am seeking a solution to restrict intersection to pixels inside the geometries on the map. Any suggestions on how to resolve this problem?

Update:

I have created a repository available at: https://github.com/FacundoGFlores/google-maps-api-threejs-layer

Answer №1

In the given scenario, the utilization of a PointCloud is illustrated for displaying the points on the specified map. Since achieving precise point-to-point raycasting is unrealistic, three.js incorporates a threshold value for the raycaster which may require calibration based on your specific requirements.

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

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

Add CSS styles directly into the shadow-root instead of the head tag | Vue.js and Webpack

Currently, I'm developing a widget that can be embedded on websites using Vue.js along with vue-custom-element. Everything was going well until I encountered an issue. The problem arises when trying to integrate a component (along with its CSS) from ...

I possess a function that can retrieve the key of an Object, but now I am faced with the task of accessing the actual Object using this value in JavaScript

This is my first time seeking advice on a technical issue. I'm currently working with the following function: export function sendRequest<T>(req: RawRequest, options) { const start = Date.now(); const reqOptions: CoreOptions = { ...

Provide props to vue-router along with boostrap-vue's b-nav-item

I am currently in the process of transitioning my SPA from modals that load components to routed pages that load components. I have been able to successfully open a page using to="/fixtures" in the html, but I am facing an issue with passing in a component ...

What steps do I need to take to produce a laser beam illusion using additive blending?

I am attempting to replicate a laser beam effect found in this article: However, when I apply THREE.AdditiveBlending for blending, the color of the laser beam seems to blend with the background color. See image here: https://i.sstatic.net/rIG0e.png ( 3rd ...

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

Trying to anchor an element at the top of a WordPress page using the jQuery Waypoints plugin. <script src="path/to/waypoints.min.js"></script> <script> $('#myelement').waypoint('sticky'); </script> However, t ...

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

Leveraging node modules in the browser using browserify - Error: fileType is not recognized

I am currently attempting to utilize the file-type npm package directly in my browser. Despite my efforts, I have encountered an error when trying to run the example code: Uncaught ReferenceError: fileType is not defined (Example code can be found here: ...

What are the steps to create a JSON file structured in a tree format?

Can you provide instructions on creating a JSON file in the following tree format? root child1 child11 child2 child21 child22 child3 child31 I am looking to generate a sample JSON file that adheres to the ...

I encountered a console issue that I am struggling with. It is showing the error message "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'"

When running this code, I encountered an error in the console (TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'). Can someone help me identify where I made a mistake and provide guidance ...

The various sections of my website are neatly tucked away under one tab, only revealing themselves to users as they click on each individual tab

My recently published website is experiencing a strange issue. When the site loads, all contents including paragraphs and videos from other pages are displayed under one tab (the HOME tab). However, once any other tab is clicked, the issue fixes itself. Yo ...

Enhance functionality in JavaScript by accessing the return value from a function

I'm trying to achieve the same outcome using a different method. The first approach is functioning correctly, but the second one is not: <script> function hello(){ var number = document.getElementById("omg").innerHTML; if(numbe ...

Sort values depending on the value of another key

I have a list of different types: const types = ['BAKERY', 'FRUITS', 'RESTAURANT', ...]; The length of this array is not fixed. Additionally, I also have a corresponding category list for each type as shown below: const categ ...

Executing SQL queries in JavaScript using PHP functions

Is it allowed, or is it a good practice? It worked for me, but what issues might I face in the future? Just to clarify, I am new to PHP scripting. // button <button type="button" class="btn btn-primary" id="Submit-button" >Save changes</button> ...

Steps to generate a nested array of objects within a given array using JavaScript

I currently have an array called ExampleArray which contains different objects with properties like "No", "Name", and "subject". I want to transform this array into a new format where the "subject" property is an array of strings instead. var ExampleArray ...

I am looking to transform CSV data into XLSX file format, upload it to AWS, and obtain the corresponding URL

I am currently in the process of converting a JSON file to CSV. My next step is to convert this CSV file to XLSX data and upload it to AWS to retrieve the link. Convert CSV to XLSX const xlsxFilePath = 'path/to/transaction_data.xlsx'; await csvto ...

The dimensions of the isometric cube do not align with the tile size of 128x128

Throughout the night, I've been attempting to create an export code that will efficiently texture cubes and export them for a game project. However, I'm facing an issue with my cube not covering the desired 128x128 width and height. Below is the ...

What is the best way to pass the "$user" variable in a loadable file using ajax?

Is there a way to send the variable user to the mLoad.php file before executing this script? Any suggestions would be greatly appreciated. Thank you! $(document).ready(function(){ $("#message_area").load('mLoad.php'); $("#userArea").submit(func ...

Align the inline text at the center as if it were an inline-block element

Currently working on a design that appears deceptively simple, yet I'm encountering challenges in centering it while keeping the text aligned to the left. https://i.sstatic.net/qhf6p.png In an attempt to have the background span only the actual text ...

Which slider was featured in the unity3d.com/5 website?

While browsing the internet, I came across the website and was intrigued by the slider effect featured in the "graphics" section. I am eager to figure out how to replicate that stunning visual effect. ...