Plotting Polyline Path on Google Maps using Angular

I am attempting to create a simple polyline connecting two markers using Angular-google-maps. While I have successfully positioned my two markers, I am encountering some complexity when trying to draw a polyline between them.

It seems that my logic may not be correct. Initially, I tried storing the position of each marker in a variable and then placing it in an array. However, when attempting to convert this into a google.maps.LatLng() object, the object appears to be empty, as shown in my console:

_.L lat:ƒ() lng:ƒ() __proto__: Object

Below is the function I am using:

function drawline (position){
  if (position.latitude === '' || position.longitude === '' ) return;
      var emitterName = position.username;

      if (emitterName == "emitter-python") {
      var coor = [position.latitude, position.longitude];
      var lineCoordinates = new google.maps.LatLng({latitude: coor[0],longitude: coor[1]});
      console.log("coor:", coor); //Print [5,5]
    }else {
        console.log("not emitter1");
      }

      if (emitterName == "emitter-python2") {
        var coor1 = [position.latitude, position.longitude];
        var lineCoordinates1 = new google.maps.LatLng({latitude: coor1[0],longitude: coor1[1]});
        console.log("coor1:", coor1); //Print [5,6]
      }else{
        console.log("not emitter2");
      }

        var pathLine = [
          lineCoordinates,
          lineCoordinates1
        ];
        $scope.polylines = [{
            path: pathLine,
            stroke: {
                color: '#000000',
                weight: 3
            },
            editable: false,
            draggable: false,
            geodesic: true,
            visible: true,
        }];
     }

Answer №1

Concerning the issue at hand

I attempted to convert this into a google.maps.LatLng() object. However, the object appears to be empty and the console output shows something like this

_.L lat:ƒ() lng:ƒ() __proto__: Object

Contrary to belief, it is not actually empty. To display the actual values (lat and lng) in the console, you can use one of the methods provided by the google.maps.LatLng class, such as toString():

console.log(latLng.toString())

If you are using the agularjs-google-maps library, then to create a polygon

<shape name="polygon" 
     paths="{{triangleCoordsAlt}}"
     stroke-color="#FF0000"
     stroke-opacity="0.8"
     stroke-weight="2"
     fill-color="#FF0000"
     fill-opacity="0.35">
   </shape>

The data should be structured in the following format:

 $scope.triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757},
      {lat: 25.774, lng: -80.190}
];

or

$scope.triangleCoordsAlt = [
      [25.774, -80.190],
      [18.466,-66.118],
      [32.321, -64.757],
      [25.774, -80.190]
];

Check out this demo that showcases how to draw a polygon

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

Limit the amount of data possible to input in the HTML editor using AngularJS

Here is the data obtained from the API: <style type="text/css> <!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--> </style> <span style="font-size:11pt;font-family:Calibri,Arial;font-style:normal;color:#000000;" ...

Return a response from the controller method without using the express response object

When attempting to handle the scenario where a fetch for an item does not return anything from another method that lacks the express response, I encounter an issue. I invoke this method from another one that has the express response: const updateItem = asy ...

What are the steps to integrate dynamic data into chartjs?

Can you assist me in understanding how to dynamically populate Chartjs with data from a json file? Specifically, I am looking to dynamically fill the labels and data fields. Sample JSON File <<< [ { "EFICAZ_TAB_ITEM_ID":1, " ...

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Currently, I am facing an issue while trying to set up jest and nodemon for my nodejs project. My development environment includes vscode, npm version 6.13.7, and node version 13.8.0. Whenever I try to install nodemon via the command line, the console disp ...

Designing a dynamic carousel with AngularJS

Currently facing an issue with handling JSON data in AngularJS. When I select the 'img' object, it logs to the console but doesn't get applied to the scope. Can anyone provide some guidance on this? 'use strict'; angular.module(& ...

Conceal a division on a webpage according to the URL of the specific

<script> function hideSearchField() { if (/menu/.test(window.location.href)) { document.getElementById('searchfield').style.display = 'none'; } } hideSearchField(); </script> I am trying to accomplish this using Jav ...

Tips on transferring multiple parameters from controller to resource

within my controller API.logInCheck().get({ nid: $scope.username, pwd: $scope.password, comname: $scope.comtyname }).$promise.then(function(response) { $rootScope.popup('success', JSON.stringify(response)); }, function(err) ...

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Is there a way to obtain the complete file path of an uploaded file in javascript? Currently, it only shows c:\fakepath. The file path is being directly sent to the controller through jquery, and I need the full path for my servlet. Are there any alte ...

Post your artwork on Facebook's timeline

I am working on a website that allows users to create custom smartphone cases. One feature I want to implement is the ability for users to share their design on Facebook, including the actual design itself. I have the object and the canvas with the 's ...

Trouble with pinch zoom functionality in a Vue component

I have a Vue component that allows me to zoom in on an image using the mouse wheel, but I'm experiencing strange behavior with pinch zoom. When I place two fingers far apart on the screen, it zooms in significantly, and when I bring them closer togeth ...

Necessitating derived classes to implement methods without making them publicly accessible

I am currently working with the following interface: import * as Bluebird from "bluebird"; import { Article } from '../../Domain/Article/Article'; export interface ITextParsingService { parsedArticle : Article; getText(uri : string) : B ...

Provide Arguments to a Function in Express JS

How's everything going? I'm curious to find out the best way, and if it's possible to send a specific parameter to an express function in NodeJS. I want to pass the string ('admin') or any other string that I choose to the 'R ...

"Encountering difficulties while trying to modify the QuillNoSSRWrapper value within a Reactjs

Currently, I am working on a project involving ReactJS and I have opted to use the Next.js framework. As of now, I am focused on implementing the "update module" (blog update) functionality with the editor component called QuillNoSSRWrapper. The issue I ...

Eliminate the use of quotation marks in the AJAX response

The response returned as "4", instead of just 4 I attempted changing it to .done(function(data)) but the outcome remained the same $.ajax({ url: "../api/ajax/addToCart.php", type: "post", data: data }) .done(function(response) { // alert( ...

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

Avoiding the insertion of styles into the HEAD section when using Webpack MiniCssExtractPlugin in combination with Create React

Currently, I am utilizing create-react-app to develop a component library with Storybook JS. The ultimate goal is to release an NPM package containing these components for use in various projects. Within this library, SASS is employed, complete with global ...

Looking for assistance with converting a basic script into a Joomla 2.5 module and resolving issues with Java integration

I'm having issues with my code in Joomla 2.5. It seems like the Java function is not functioning properly within Joomla. Can someone assist me with troubleshooting this problem? mod_mw_pop_social_traffic.php <?php defined( '_JEXEC' ) or ...

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

The Angular directive ng-if does not function properly when trying to evaluate if array[0] is equal to the string value 'Value'

In my code, I want to ensure that the icon is only visible if the value at array index 0 is equal to 'Value': HTML <ion-icon *ngIf="allFamily[0] === 'Value'" class="checkas" name="checkmark"></ion-icon> TS allFamily = [ ...