Map markers in AngularJS NgMap are showing incorrect positions when specified by city name

Trying to implement a simple marker according to this example, but it only works with static city names like "Toronto". When using dynamic city names, the marker is placed in the center of the world map.

Below is my code:

<div map-lazy-load="https://maps.google.com/maps/api/js">
       <ng-map zoom="11" center="{{vm.city}}">
            <marker position="{{vm.city}}"
                title="You are here"
                centered="true"
            ></marker>
       </ng-map>
</div>

https://i.sstatic.net/zDUGv.png

What am I doing wrong?

Answer №1

This particular situation arises when the geographic coordinates (latitude, longitude) for the marker's position cannot be accurately determined.

If you provide an address for the marker's position, the Geocoding Service is used in the background to find the corresponding lat,lng. In this scenario, it seems that you are likely receiving a OVER_QUERY_LIMIT status code, indicating that you have exceeded the usage limits of the Geocoding API.

There could be other reasons why the address cannot be resolved through the Geocoding API, but essentially, if any status code other than "OK" is returned, the marker will appear at the default position {lat:0,lng:0}.

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

AngularJS's $resource module returns an empty array as a response

I am trying to display a table with items from JSON data. I have created a Service that returns the JSON data. In my controller, I am querying the Service to receive an array of data. It's a little confusing because I am putting the response in a new ...

Loop through an array of objects that each contain two sub-objects using ng

I'm looking to organize each data-record in an object that contains two other objects structured like this: data Object { abbData={...}, invoiceData={...}} abbData Object { service="24", conn_fee="0", month_fee="249", more...} invoiceData ...

Change the className of an element in React upon clicking it

I just finished developing a menu bar using ReactJS with some basic routing features. Here is the JSX code for the component: class TopBar extends Component { state = { menus: [{id:0,menu:"Home"}, {id:1,menu:"Contact"}, {id:2,menu:"About"}] } a ...

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Recently, I've been experimenting with a small project involving draggable divs. However, the code I've written doesn't seem to be functioning properly, causing JQuery to become unresponsive. Is there an alternative method that is simple an ...

Utilizing AngularJS to fetch data from a database using JavaScript and displaying it dynamically on a webpage using the ng-show

I am attempting to retrieve data from my database and then utilize ng-show with that data. Here is the JavaScript code in my file : httpq.post('/data/instructor.asmx/PasswordAgain', postData) .then(function(data) { $scope.i ...

What is the best method for calculating the total of a mongoose attribute?

I am attempting to calculate the sum of schema using reduce. However, the current code is not adding the items together but rather placing them next to each other. For example, 20 + 30 should result in 50, but instead it gives me 02030. Is there an issue w ...

Mapbox GL JS stops displaying layers once a specific zoom level or distance threshold is reached

My map is using mapbox-gl and consists of only two layers: a marker and a circle that is centered on a specific point. The distance is dynamic, based on a predefined distance in meters. The issue I'm facing is that as I zoom in and move away from the ...

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

Displaying the username in a NodeJS view without using res.render can be achieved

Looking for a solution on how to effectively transfer user data from req.user to the view? Visit this insightful answer on Nodejs Passport display username. Most of the resources I've come across, such as this one and references like mean.io, involve ...

Show data from an API in an HTML table

I encountered an issue with an API, and despite trying console.log(response.[""0""].body) to view the response in the console, it does not seem to be working. My goal is to extract all the data from the API and display it in a table. Below is my code: ...

The input field is not functioning properly within the vue-drag-resize component

I have incorporated vue-drag-resize from https://github.com/kirillmurashov/vue-drag-resize in my project. Unfortunately, I am facing an issue where I am unable to focus and type anything inside an input text field that is contained within the vue-drag-res ...

The property of the object is not defined

My goal is to pass an array of objects (merchants) into a function, iterate through each 'merchant', and perform an action with the 'merchant_aw_id' of that merchant. However, I am encountering an issue where I am getting undefined. mo ...

What is the best way to design a multi-submit form without the need for page refreshing?

I am interested in creating a form with multiple questions where users can click "next" for each question without the page reloading. For instance Click on "Begin" On this page, there is no reload when choosing a radio option and clicking "next". How ca ...

"Comparison: Java Installation vs. Enabling Java in Your Web Browser

Is there a method to determine if Java is currently running on your system or if it has been disabled in your browser? Our application relies on Java applets, and we typically use "deployJava.js" to load the applet. However, even when Java is disabled in t ...

Using an array as a parameter in Angular Resource's update method

After weeks of searching on Google, I still haven't found a solution to my problem. Although someone might consider this a duplicate, I believe it's a unique issue. Here's the situation: I'm currently using Angular in a node-webkit ap ...

Utilizing AJAX to call a web service

Trying to make a call to this web service via AJAX... The structure of the web service is as shown below public class WebService1 : System.Web.Services.WebService { [WebMethod] public String countryCo ...

Experimenting with AngularJS 1.6 class-oriented controllers through the lens of Jasmine/Karma testing

Struggling to use jasmine/karma to test my class-based controllers, unfortunately without any success. Most examples I come across are dated back to 2014 or older. I've made sure to load the angular and angular-mock files in my karma configuration fil ...

The custom caching strategy was not implemented for the API response in web-api-2/OWIN

Starting with web-api 2 has presented me with a question: how do I set caching settings? I've created a custom caching-message-handler as shown below (simplified for this post) public class CachingMessageHandler : DelegatingHandler { private void ...

The React component fails to render on the screen

Upon retrieving data from the database server, attempts to render it result in the data being shown in the console log but not displayed in the component. What could be causing this issue? useEffect(() => { readRequest().then(setTodos); c ...

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...