Issues with displaying markers on Google Maps API using JSON and AJAX

I have successfully coded the section where I retrieve JSON markers and loop through them. However, despite this, the markers do not seem to be appearing on the map. Could someone please assist me in identifying the mistake?

      $.ajax({
            url: "get_markers.php",
            type: 'POST',
            dataType: 'json', 
            data: {'address':address},
            success: function (html, status, response) {
                $.each(html, function(i, place) {
                    alert(JSON.stringify(place.lat)+","+JSON.stringify(place.lng));  
                    latLng = new google.maps.LatLng(JSON.stringify(place.lat), JSON.stringify(place.lng)); 
                    marker = new google.maps.Marker({
                      position: latLng,
                      map: map
                      //title: data.title
                    }); 
                });                 
            }

I have ensured that the variables map, latLng, and marker are defined correctly. Additionally, I am receiving the correct latitude and longitude values when using an alert(..).

Thank you!

Answer №1

What is the reason for converting to a string?

The Constructor Documentation

LatLng(lat:number, lng:number, noWrap?:boolean)

Edit

latLng = new google.maps.LatLng(JSON.stringify(place.lat), JSON.stringify(place.lng)); 

Into

latLng = new google.maps.LatLng(place.lat, place.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

Creating a pair of servlets using XML configuration in a Spring MVC project within the NetBeans IDE

Currently, I am experimenting with incorporating ajax into spring-mvc using an example I found on the internet. However, I am encountering issues as it does not seem to work properly. It seems like the problem lies in my inability to run two servlets simul ...

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

Discover the secrets to easily finding specific items within a table by harnessing the power of the table sorter plugin with

Currently, I am utilizing the tablesorter plugin and its corresponding tablesorter widgets to facilitate searching within a table. However, I encountered an issue with the tablesorterWidgets.js file when attempting to configure the number of rows displayed ...

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

Ways to trigger a 406 Error (Not Acceptable) using jQuery

Currently, I am implementing error handling in my.js file. This involves making cross-domain calls to another server and utilizing Mustache.js for dynamic HTML templates. $.getJSON(url, function(data, textStatus, xhr) { $.each(data, function(i, data) { ...

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width he ...

Set up specific vue.config.js configurations for unique environments in Vue

I am working on a multi-page app where I want certain pages to only show up in my development environment. Here's how my vue.config.js looks: module.exports = { productionSourceMap: false, pages: { index: "src/main.js", admin: { ...

AngularJS - Custom directive to extract a property value from an object

Currently, I am using the following for loop to retrieve the parent category: angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); I am looking fo ...

Exploring Array Iteration: Navigating through Arrays with the .map Method in React and Vue

I am currently using Vue after coming from a React background. In React, there is a method called .map that allows you to render a component multiple times based on the number of items in an array and extract data from each index. Here's an example: f ...

Allowing Symfony2 forms to disregard additional fields

When attempting to submit data to my Symfony form using the submit() method, I encounter an error if the request contains extra data: "This form should not contain extra fields" Is there a way to configure the form to ignore extra data? Are there alte ...

Lowest value malfunctioning

I have encountered an issue with setting minimum values for 4 things. All 4 things are supposed to have the same minimum value as the first thing, but when moving the slider, everything goes back to normal and works fine. Where could the problem be origina ...

Parameter for Ajax URL

As a beginner in the world of Ajax, I'm on a mission to grasp the inner workings of this technology. I came across a tutorial on w3schools that sparked my curiosity. In the code snippet below, the 'url' is defined as demo_ajax_load.txt. Wil ...

PHP fails to recognize Ajax POST requests

Here is a function I have created to submit forms: function submit_form(form) { $( form ).submit(function(e) { // Prevent form submission e.preventDefault(); // Get the form instance ...

LeafletJS and ReactJS integration causing misalignment in tile ordering

In my ReactJS single page application, I am utilizing the LeafletJS plugin to showcase a full-page map. Even after following the guidelines mentioned here, I am facing an issue where the map tiles are not displayed in the correct order and appear to be shu ...

Leveraging bespoke JSON for crafting an Angular form and extracting data

Hey there, I'm currently using AngularJS to build my application and I've run into an issue with generating a dynamic form. Here's an example of the JSON structure I'm working with: { lines :[ { fields:[{ fi ...

What are the best practices for managing large amounts of data using jQuery and PHP with AJAX?

When I attempt to pass a large JavaScript array to PHP using the $.ajax method of jQuery, with Content-Type set as JSON and data sent as RAW, I encounter an issue. In PHP, I retrieve the data using file_get_contents('php://input'). Despite every ...

The provider named toasterProvider is not recognized within the dependency injection chain, which includes toaster, RugHttpInterceptor, $http, and ng1UIRouter

Working with Interceptors to show a toast message when my app encounters an HTTP error in responseError code. Using AngularJS Interceptor for an MEAN.JS app. Interceptor Code angular.module('rugCoPro') .factory('RugHttpInterceptor', ...

Tips on preventing users from navigating backwards in a React Redux application

Seeking guidance on how to restrict user access after successful login in react redux. Can anyone assist me? I want to prevent users from navigating back to certain routes once they are logged in I am currently working on securing the routes to block unau ...

"Utilize a Unique WordPress Plugin to Make an Ajax Call and Return a

In the main file below is where you can find the code: <?php /* Plugin Name: XYZ */ class GMS_SMS_Notifier { public function __construct(){ if (is_admin()){ //JS add_action( 'admin_enqueue_scripts',array($this,'loa ...

A single block in Javascript uses the ternary operator (?:) to make changes to an object and return

Can you modify a dictionary inside the ?: statement and then return the updated dictionary in the same block? For example, something like this: a > b ? <dict['c'] = 'I'm changed', return dict> : <some other code>; I ...