marking locations on Google Maps with pins

Is there a simpler method to pinpoint multiple locations on a Google map? I have numerous coordinates to mark, and the current process is quite challenging.

The current method involves using the following controller:

.controller('MapCtrl', function($scope, $ionicLoading, $compile, $state) {
      function initialize() {

        //variables for adding the coordinates of the locations

        var Chunnakam = new google.maps.LatLng(9.741527 ,80.033931);
        var Nelliady = new google.maps.LatLng( 9.828288,80.220362);
        var Karaditoku_Kilinochchi = new google.maps.LatLng(9.380289,80.377);
        //many more of these follow

I am currently placing the points like this:

 var marker = new google.maps.Marker({
          position: Chunnakam,
          map: map,
          title: 'Chunnakam'
        });

        var marker2 = new google.maps.Marker({
          position: Nelliady,
          map: map,
          title: 'Nelliady'
        });

//
        var marker3 = new google.maps.Marker({
          position: Karaditoku_Kilinochchi,
          map: map,
          title: 'Karaditoku Kilinochchi'
        });

If there is a simpler way to accomplish this task, I would greatly appreciate any guidance. Thank you.

Answer №1

One way to handle this is by creating an array of objects and looping through each one:

var cities = [ { marker: null, name: 'New York', lat: 40.7128, lng: -74.0060 },
              { marker: null, name: 'Los Angeles', lat: 34.0522, lng: -118.2437 },
              // add more cities here
            ];


angular.forEach(cities, function(city) {
    city.marker = new google.maps.Marker({
        position: new google.maps.LatLng(city.lat, city.lng),
        map: map,
        title: city.name
    });
}

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

Encountered a SyntaxError in vue + webpack regarding an invalid range in character class

I am currently using webpack 4.29.3 and vue.js 2.6.3 to create a simple hello world project. I expected the index.html file to render correctly, but I encountered an error: SyntaxError: invalid range in character class. This error is confusing because I&ap ...

The inability to receive a response from the OpenAI API in NextJS is causing frustration

I tried following a tutorial to implement functionality in T, but I am facing issues with getting a response from the API. I am unsure if there has been an update to the OpenAI API that is causing this problem. Any assistance would be greatly appreciated. ...

Unable to perform 'put' operation on 'idbObjectStore' due to empty result when evaluating the object store's key path

An error has occurred in a chrome-based APP that I am currently supporting. Despite my attempts to investigate further, I have been unable to determine the cause of the error. Can someone please explain to me the potential reasons behind this issue? The e ...

Issues with form validation in Angular reactive forms are causing problems

I recently created a complex reactive form by following the guidelines from this source on how to handle validation in Angular 9. After posting my code in StackBlitz, I ended up with three links: EDITOR URL APP URL EMBED URL If these links are not worki ...

How do I go about configuring the uploaded image?

Here is a sample of my HTML code: <div class="images"> <figure> <button id="upload-add-product" class="icon-plus"></button> <input id="upload-file" type="file" style="display: none;" multiple/> </fi ...

Using Special Characters in React JS Applications

When handling CSV uploads with accented characters such as émily or ástha, I encountered the need to encode and pass them to the backend. Experimenting with different approaches, I tried adjusting the file type in FormData from 'text/plain' to ...

Selected jQuery plugin is not updating HTML select option

I've been attempting to update the select tag in my HTML file to match the style used in the example on the Chosen v1.8.7 website, but despite following the instructions, the select element remains unchanged: test.html <head> <link rel=& ...

Updating my Cordova plugin collection

My Cordova plugin for Android applications differs from others as it only utilizes an Application (App.java) and not a CordovaPlugin class. Upon initial installation using cordova plugin add, everything functions correctly. However, when attempting to rem ...

Ways to incorporate a unique debounce technique where the function is only executed every nth time

const _debounce = (num, fn) => { //implementation goes here } const originalFunction = () => { console.log('fired') } const _callFunc = () => _debounce(2, originalFunction) _callFunc() //The originalFunction does not run _callFun ...

Dynamically Incorporating HTML Attributes Using Angular

My goal is to automatically disable an HTML form field based on a property in a JSON file. The property value in the JSON determines whether the form field should be disabled or not. To achieve this, I added data-is-disabled={{field.rules.disabled}} to th ...

Sending information from AngularJS to nodeJs/Sequelize

I am currently in the process of developing an e-commerce website using Node.js/Sequelize and AngularJS. For my project, I have organized it into 2 main folders: Client (which houses AngularJS starter files) https://i.stack.imgur.com/0vzsF.png Server ...

Unable to render ng-view due to it being enclosed within a comment block

Currently, I am in the midst of developing a single page application which employs Node, Express, and Angular. The layout of my directory follows the typical format of an Express application <app> +--public +--routes +--views +--partials ...

Reset input field value upon triggering a JavaScript alert

I am facing an issue with a dynamic field that receives its value from the database. I need to compare this value with an old value and trigger an alert if it is greater. In such cases, I want to reset the field back to an empty value. I am trying to achi ...

Transforming jQuery.ajax post to fetch API

I am currently working on a service that asynchronously calls a REST API. My jQuery code is working fine, but I want to switch to using JS fetch. However, when I try to post the data with fetch, the server responds with an error saying "Missing parameter: ...

Having trouble running the d3js example on Ionic 2

I am having trouble running the example provided in this link: https://github.com/abritopach/ionic2-d3js-example Even after installing the latest Ionic 2 version and npm, I encounter an error when trying to run the app, as shown in the browser console. p ...

React-Image-Annotate encountered an issue: SyntaxError - The import statement cannot be used outside a module

Encountering an issue while trying to set up react-image-annotate. Here is the problem I am facing initially: https://i.stack.imgur.com/XgYPd.png This is how I have implemented it: import React from 'react' import ReactImageAnnotate from ' ...

Dynamically obtaining the screen width in JSP using a variable

Could someone provide assistance on how to resize an image using an img src="blah.jpg?width=x" so that my page can be displayed at various sizes? I just need x (width) as a JSP variable. Update 2021: It's been 9 years since this question wa ...

Guide on how to validate react-multiselect with the use of Yup validation schema

If the multiselect field is empty, the validation message 'Product is required' is not being displayed. How can I validate this field? Here is the validation schema: validationSchema={ Yup.object().shape({ productID: Yup.string().requi ...

The text is not accepting the React ClassName

Lately, I've been diving into the world of coding with React. Today, as I was working on a new project, I encountered an issue when trying to apply a styling className. The <span> element appeared without any style. Here's a snippet from my ...

What could be the reason for the absence of the back button?

Having trouble understanding why the back button isn't showing up when I navigate to an <ion-view> app root state template: <ion-side-menus> <ion-side-menu side="left"> <div class="list"> <!-- ... --> & ...