Google Maps markers are not being populated with the accurate geoJson data

The markers linked to my geoJSON are not showing up on the map. When I test my geoJSON on , it works perfectly. However, if I replace my geoJSON with a sample from the Google Maps Dev API

'https://storage.googleapis.com/maps-devrel/google.json'
, the overlay displays correctly on my map.

Below, I am using

http://localhost:3009/murals.json
as the argument for the loadGeoJson function. I have also tried using test.json from a local file.

Code in my map .js file:

function initialize() {
  var myLatlng = new google.maps.LatLng(40.0172679,-105.2839094);
  var myOptions = {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(
    document.getElementById('map'), myOptions
  );
  map.data.loadGeoJson('http://localhost:3009/murals.json');
};

google.maps.event.addDomListener(window, "load", initialize());

My controller (potentially needs refactoring, but correctly outputs formatted geoJSON):

def index
    @murals = Mural.all
    muralHash = []
    @geojson = { type: "GeometryCollection",
      geometries: muralHash
    }
      @murals.each do |mural, myHash = {:type => nil,:coordinates => nil}|
        myHash["type"] = 'Point'
        myHash["coordinates"] = [mural.longitude, mural.latitude]

        muralHash << myHash
      end
    respond_to do |format|
      format.html
      format.json { render json: @geojson }
    end
  end

Sample of geoJSON data:

    { "type":"GeometryCollection",
      "geometries":[
        {
          "type":"Point",
          "coordinates":[-105.287685950293,40.0124034482671]
        },
        {
          "type":"Point",
          "coordinates":[-105.196297724738,39.9935339839196]
        },
        {
          "type":"Point",
          "coordinates":[-105.283136923804,40.0162490232761]
        }
      ]
    }

Answer №1

The JSON data provided does not adhere to the expected format for the maps API. A corrected version is shown below:

{
  "type":"FeatureCollection",
  "features":[
    {
      "type":"Feature",
      "geometry":{
        "type":"Point",
        "coordinates":[-73.987410,40.748817]
      }
    },
    {
      "type":"Feature",
      "geometry":{
        "type":"Point",
        "coordinates":[-74.006015,40.71455 ]
      }
    },
    {
      "type":"Feature",
      "geometry":{
        "type":"Point",
        "coordinates":[-73.983835,40.760116]
      }
    }
  ]
}

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

Immersive image display

Currently on my website, I have a table displaying 9 images with descriptions. I'm looking to enhance user experience by allowing them to click on an image and view it in a larger format like a gallery without disrupting the layout of the page. This ...

Combining two lists using a shared key in Java

Combining data from two different sources can be tricky, especially when merging lists. One list comes from an AS400 query, while the other is from a SQL Server query. The goal is to create a unified list that includes all assets. Let's take a look at ...

How can I attach the input value that has been selected to another div using Ajax AutoComplete for jQuery?

Greetings, I am currently utilizing the Ajax AutoComplete for jQuery library. Within this library, there are 2 demos available. In the first demo titled "Ajax auto-suggest sample (start typing country name)", when a country is selected from the dropdown, ...

An Ajax call nested within another Ajax call

I've implemented an AJAX request to load my "home" page and "about" page into a designated "container" when a menu link button is clicked on my index.php. Now, I have three links on my "home" page and I want each of these links to open within the same ...

Error: The function $compile does not exist

Currently, I am working on developing an AngularJS directive using TypeScript. While testing my code in the browser, I encountered the following error: TypeError: $compile is not a function at compileComponent.js:14 Interestingly, the TypeScript compiler ...

Button for searching through the Bootstrap navigation bar

I'm currently working on adding a search menu to the navbar in two different designs - one for screens below 767px and another for screens above 767px. Although I have been successful in expanding the search bar, I am facing issues with the correct p ...

Refreshing various innerHTML elements using a universal function

I'm attempting to consolidate several similar functions into one, but I'm encountering some challenges. Below is an example of one of the original functions that is called by a button press: function ADD_ONE(Variable_Name){ Variable_Name += ...

Basic game of tic tac toe using JavaScript and jQuery

Teaching myself the ropes of JavaScript/jQuery, I decided to dive into building a simple tic tac toe game. Following this example as a guide, I embarked on creating my own version. While most parts seem to be working smoothly, there's one problem that ...

Why State in React Does Not Get Updated When Parent Function is Called from Child Component?

Struggling with getting my child component, ChildButton, to trigger a function in its parent component, ParentTable, that includes a "setState" to refresh or update the table in the parent. I've passed a getData function from the parent to the child ...

Updating a singular entry in a RecyclerView list on Android: A step-by-step guide

I am currently working on an app that interacts with an API and returns approximately 500 rows of data. Within my app, these rows can be updated on the detail page. I am wondering if there is a way to update a specific row in the Recycler View without havi ...

Javascript encountered an error upon attempting to return from the main function

I have a function that calls the database to perform an action: function callQuery(query) { db.query(query, (err, res) => { if (err) { // Error connecting to DB console.log(err.stack) } else { // Return the results ret ...

Receiving blank response when trying to access server variable on the client side

Query: On the server side, I set the value of SessionData(EmployeeID) = "12345", which is first executed during page_load. Later, on the client side: function getEmployeeId() { return "<%# SessionData("EmployeeID")%>"; } When I use th ...

Can JOLT be utilized to convert this HTML into a JSON output?

Is it possible to transform this HTML into JSON using JOLT SPEC? [<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> </HEAD> <BODY><br> #Message Receive correctly<br> ORDERID=1725786449 ...

Is it time to shake up the location of your Toastr

Recently, I've been working on implementing Toastr from this GitHub repository. While I am able to receive alerts and toasts as intended, I'm running into issues when trying to apply custom options. It seems to only stick to the default settings ...

Is there a way to ensure the AJAX call finishes before looping again in a foreach loop?

Can Promises be useful in this case where I am trying to implement them? $.getJSON("url", "data", function(json) { json.forEach(function(item) { //do something $.get("url", "data", function(respon ...

Presenting the correct error notification if the JSON data fails to load in an HTML webpage

Here is a sample JSON data: [ { "componentid": 4, "displayImageUrl": "https://via.placeholder.com/350x200", "title": "theme", "shortdesc": "to set theme for different applications" }, { "componentid": ...

What is the purpose of encasing the routes within the <Switch> element in react-router, when they seem to function perfectly fine without it

Currently utilizing react-router-dom version 5.2.0. As a practice, I typically enclose all my Route components within a Switch component. For instance: const MyRoutes = () => ( <Switch> <Route path='/route1' exact ...

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

Introduce a loading screen to display as users navigate between HTML pages

I am looking to incorporate a mp4 animation as a loading screen between two html pages. The video lasts approximately 5 seconds, so I would like the loading page to display for the same amount of time. Is there a way to achieve this? Additionally, is it p ...

Looping through an array and adding its elements to a dictionary using JavaScript

I am struggling to figure out how to iterate over a dictionary with values in the form of arrays and then organize those values into a new dictionary. I am unsure of the steps needed to achieve this. Below is the data I need to iterate through: { t: [&quo ...