Obtain a collection of waypoints using the Google Maps API

I want to dynamically add autocomplete address text input, but I'm unsure how to convert those addresses into an array of longitudes and latitudes. My goal is to have a set of waypoints to place on a map, but as a beginner in JavaScript and AngularJS, I am unsure of how to achieve this:

HTML:

<div ng-show="content == 'first'" ng-app="angularjs-starter" class="form-group" ng-controller="MyCtrl">
  [<span ng-repeat="input in inputs">"{{input.value}}"</span>]
  <label class="control-label">tournee</label>
  <div ng-repeat="input in inputs">
    <!-- autocomplete address inputs-->
    <input google-place type="text" ng-model="input.value" />
    <button ng-click="removeInput($index)">Remove</button>
  </div>
  <button ng-click="addInput()">add input</button>
</div>

Angular script

var app = angular.module('angularjs-starter', []);

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.inputs = [];
  $scope.addInput = function() {
    $scope.inputs.push({
      value: ''
    });

  }

  $scope.removeInput = function(index) {
    $scope.inputs.splice(index, 1);
  }
}]);

Answer №1

To start, simply create a new object and then add it to an array.

var coordinates = [];

var latitude = 37;//example of a number
var longitude = -122;//example of a number

var point = {
    'latitude': latitude,
    'longitude': longitude
}

coordinates.push(point);

Next step is to place markers on a map using a loop with the 'coordinates' array.

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

What is causing the issue with the minlength and maxlength validations not functioning correctly?

I am currently working with AngularJS and HTML to write code. I am facing an issue where the minlength and maxlength validations are not functioning properly in my code. Below is a snippet of my HTML code: <input type="text" id="healthcomplaint" ng-m ...

Unable to locate the node module within the Rails stimulus controller

I'm facing an issue with integrating my own npm package into a Rails application that I have developed. It's unclear whether the problem lies in the creation of the node package or within the rails app itself. The package in question is fairly ...

Is it necessary to remove every letter before moving on to the following array position?

I've been working on a script to create an animated "self-writing text" effect. However, I'm encountering an issue where each word jumps to the next one instead of smoothly transitioning by deleting each letter before moving on to the next word i ...

Strategies for efficiently populating dropdown menus using a Load Saved Search feature

I have three dropdown boxes named marketOrg, region, and district which are populated using ajax calls. The market dropdown is filled when the page loads, and upon selecting a marketOrg from that dropdown, it triggers the getRegion() JavaScript function. T ...

Utilizing local storage, store and access user's preferred layout options through a click function

Exploring the realm of localstorage for the first time, I am considering its use to store a specific ID or CLASS from my css file. This stored information would then be utilized to render a selected layout (grid/list) in the user's browser upon their ...

Connecting promises to build upon past outcomes

Can someone help me figure out how to access previous results in promises? I've been following the guidance on this stackoverflow thread. I had success with 2 promises, but things got tricky when I added a 3rd promise that makes a POST request to an ...

Creating an Introduction Slider in Ionic Vue Application: A Step-by-Step Guide

It's common to come across mobile applications that feature an introduction slider upon installation for the first time. I noticed that most of the information available online pertains to older versions of Ionic with Angular, which has left me feelin ...

Updating URL on tab selection in Angular Bootstrap Tabs

I am incorporating Bootstrap's Tabs into my project and I want the URL to change when a tab is clicked. For example: /home/first /home/second Unfortunately, I am struggling to make this work properly. Here is the code snippet from my $routeProvider: ...

SVGs do not display on iPhones

Having some issues with my code - specifically, I have an SVG animation that seems to work on all devices except iPhones. I've been struggling to find a solution. Here is the code snippet for the SVG: <div class="contenuto-svg"> <svg vi ...

Validate if the translation file exists in ngx-translate

Is there a way to determine if a translation file exists for the language obtained from navigator.language using ngx-translate? I am looking to implement something similar to: if( isLanguageAvailable(navigator.language)) { this.translate.use(navigator.l ...

Obtain all the selection choices in a dropdown list using Selenium

Although I have come across similar questions, this one is distinct in its simplicity. Unlike other queries that involve iterating over options in a loop, my question revolves around the usage of the getOptions() method mentioned in Selenium documentation. ...

Developing a password strength checker using Javascript for ultimate security

Currently encountering an issue with my javascript project. The main goal is to validate user input against a list of known bad passwords and also their "1337" versions. Initially, checking for the basic bad password list was straightforward. However, th ...

Troubleshooting the issue of not being able to select a value when combining ng-grid and ui-select2

When working on an ng-grid, I came across the need to use a more user-friendly dropdown in the editableCellTemplate. After some research, I discovered that ui-select2 seemed like a good choice. However, I encountered a problem where any click on this comp ...

Tips for passing an object as an argument to a function with optional object properties in TypeScript

Consider a scenario where I have a function in my TypeScript API that interacts with a database. export const getClientByEmailOrId = async (data: { email: any, id: any }) => { return knex(tableName) .first() .modify((x: any) => { if ( ...

Tips for assigning a standard or custom value using JavaScript

What is the best way to automatically assign a value of 0 to my input field when the user leaves it blank? Should I use an if statement { } else { } ...

Javascript: Altering Link Color

After creating my own webpage with a unique light switch that inverts colors, I encountered an issue with changing the color of my links. Despite setting the anchor tags to transition to a different color, it just wouldn't work. Here is the HTML code ...

Are there any tools available that can convert ThreeJS code into WebGL?

Are there any existing tools that can convert ThreeJS to WebGL? Or, could you provide guidance on creating a converter for ThreeJS to WebGL? ...

Obtain the prototype function

I'm facing an issue with my code: function Param(){ this.name = 'sasha' this.method = function(){ return this.name + 'native method' } this.pro= function(){ debugger // Param.prototype.method() //undefined proto met ...

Interact with table cells using Angular's mousedown and mouseover events

I am looking to create a feature that highlights table cells when the mouse is pressed and hovered over a cell. Essentially, I want the cell to be highlighted whenever the mouse button is clicked and moved over it. However, in this example, there seems to ...

Using Angular ng-token-auth to post to an incorrect localhost address

I have a Node.js server running on http://localhost:3000/, and a React Frontend running on http://localhost:8000/. I am setting up the user authentication feature with JWT. However, when posting the token, it goes to the incorrect localhost address: http ...