Integrate our JSON data center into the Google Maps API

After retrieving the lat and lng positions from the database, I attempted to replace them in the center JSON object, but encountered an issue. The console displayed the position as

{lat:31.752809648231494,lng:-7.927621380715323}
, which then led me to convert it to JSON format.

{lat: 31.752809648231494, lng: -7.927621380715323}

I suspected that the presence of double quotes in the JSON data might be causing the problem. To resolve this, I tried removing the double quotes using the following code:

var pos = position.replace(/\"/g, "");
console.log(pos);//{lat:31.752809648231494,lng:-7.927621380715323}
var json = JSON.parse(position);
console.log(json); //{lat: "31.752809648231494", lng: "-7.927621380715323"}


var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.791702, lng: -7.092620000000011},
zoom: 6,
mapTypeId: 'roadmap'
});

Answer №1

When you remove double quotes from a JSON string, you will also be removing the quotes around the keys. This results in an invalid JSON format, causing JSON.parse to fail.

Instead, you can try using JSON.parse on the original object and then use parseFloat to convert the string values into numbers.

center: {lat: parseFloat(json.lat), lng: parseFloat(json.lng)}

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

When a JSON object is handled as a string

The JSON returned from my Ajax call looks like this: returnedData = "[ { id: 1, firstName: 'John', lastName: 'Smith', address: '123 Spa Road', city: 'London', orders: [ { product: ...

"Refreshing the page is the only way to get the JavaScript image

I'm currently facing a frustrating issue with my game engine. The images are not loading correctly on the initial page load, forcing me to refresh the page every time. Here's the current code snippet that I'm working with: Texture creation: ...

Utilizing Vue3's Ref feature within a component?

Currently, I am developing an input component for my login form to avoid creating the input tag repeatedly whenever it is needed. In my previous implementations without components, I was able to save the input value at the @input event using refs (by acces ...

getting my double-click event to function properly

Hey there, I've been working on a click double-click event handler for my jQuery Ajax engine. The concept is pretty simple - you should be able to either click or double-click a button. I put together this code myself but for some reason it's not ...

Example of jQuery UI tabs - each new tab opens with a unique script assigned

Here is a jQuery tabs script that you can check out: http://jqueryui.com/demos/tabs/#manipulation var $tabs = $( "#tabs").tabs({ tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ...

Chaining promises: The benefits of attaching an error handler during Promise creation versus appending it to a variable containing a promise

function generatePromise() { return new Promise((resolve, reject) => { setTimeout(reject, 2000, new Error('fail')); }); } const promise1 = generatePromise(); promise1.catch(() => { // Do nothing }); promise1 .then( ...

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Currently, I am in the process of developing a map component using a JSON array and implementing a click event handler for each item. The objective is to toggle the CSS style to color the item when clicked, which is functioning as expected. However, my goa ...

Creating chef databags with chef-vault: A step-by-step guide

Is it necessary to create chef-vault in order to encrypt a databag containing server credentials? ...

Creating a dynamic user interface with multiple tab navigations using jQuery on a single web

On my current HTML page, I am facing an issue with multiple tab navigations. When I click on one navigation, it also affects the other tab navigations. I cannot seem to find a way to only affect the tab navigation that I am clicking on without hiding the ...

Changing Text to Number in JavaScript

Looking to convert the string value of 41,123 into an integer using JavaScript. I attempted parseInt(41,123, 10) and parseFloat methods but haven't received the desired result. The issue seems to be with ParseInt and parseFloat when encountering com ...

Adjust the scrollbar height to be proportional to the size of the element

Can a div's scrollbar be set to a height smaller than the div itself? For example, having a <div> with the height set to 400px and overflow-y:scroll, then setting the scrollbar's height to 300px? Creating a gap between the bottom of the scr ...

What is the best way to remove or reset a map from a material skybox in three.js?

In my ThreeJS scene, I am trying to implement different modes for viewing all models in the skybox, with or without textures. I have two functions called 'getSkyTexture' and 'getSkyColor' which are supposed to work separately. However, ...

Is there a record log for the werewolf in the book "Articulate Coding: The Lycanthrope's

I've been tackling the challenges of Eloquent JavaScript at the Lycanthrope's Log, but I'm struggling to grasp a particular code snippet. Despite my efforts in checking values and testing with console.log, this piece of code still eludes me: ...

Enhance pagination and column filtering in JQGrid without relying on local data (loadonce = false)

I'm currently facing an issue with my web application development. I am utilizing Laravel 5.8 for the backend and JQGrid version 4.6.0 to create grids. One of the grids I have is constructed with a dynamic URL that fetches JSON data from the server b ...

Categorizing information within a Python document

My document contains data in a specific structure: CC ----------------------------------------------------------------------- CC CC hgfsdh kjhsdt kjshdk CC CC ----------------------------------------------------------------------- CC Release of 18 ...

Can you explain how this particular web service uses JSON to display slide images?

{ "gallery_images": [ {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433518577.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433519494.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img ...

Extracting Data from Multiple Pages Using Python 3 without Changing URL

Recently, I delved into the world of web scraping and decided to try my hand at grabbing data from various websites. Currently, I'm focused on scraping information from the site - Using selenium, I've managed to extract longitude and latitude da ...

Indexing with [] cannot be used on an expression of type object

Currently, I am working with API on the .NET Windows form. I recently copied some code from a provided website and encountered an error message that states: Cannot apply indexing with [] to an expression of type 'object' I'm not sure how ...

How to dynamically insert a key into an array by locating a specific value in AngularJS

I need help adding a new key to a JSON array by searching for a specific key value. For example JSON:- [ { "$id": "2025", "ID": 41, "Name": "APPLE" }, { "$id": "2026", "ID": 45, "Name": "MANGO" }, { "$id": "2027", ...

Prevent scrolling/touchmove events on mobile Safari under certain conditions

iOS 5 now supports native overflow: scroll functionality. I am trying to implement a feature where the touchmove event is disabled for elements that do not have the 'scrollable' class or their children. However, I am having trouble implementing ...