Search code examples
htmlangularjsgoogle-mapsangular-promiseangularjs-service

AngularJS how to get data from <textarea> prefilled by Google Maps script

I have a script that accesses the Goggle Maps API and fills in a <textarea> with results. How do I pass that prefilled data into an AngularJS controller?

$scope.Add=function(msg){

$log.log(msg)
}

<div ng-app="">
<div ng-controller="MapController">  

<div style="display:block">

    <div id="map" style="float:left"></div>

    <div style="float:left;">

  <textarea class="user" ng-model="user" id="points_textarea"></textarea>

    <input type="button" value="submit" ng-click="Add(user)" />

</div>


</div>

i am new to angularjs,

how to pass the data from textarea which is already prefilled from one of the javascript function in html, to the controller in angularjs

Any help please

Solution

  • Bring the Google Maps functions into the AngularJS framework:

    angular.module("gMap", [])
.service("gMap", function($q) {
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];

  this.initialize = initialize;
  this.calcRoute = calcRoute;
  this.reset = reset;

  //functions here

});

    Modify the calcRoute function to return a promise:

    function calcRoute() {        
    var mode = google.maps.DirectionsTravelMode.DRIVING;
    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
        optimizeWaypoints: true,
        avoidHighways: false
    };

    var pointsDefer = $q.defer();        
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        //Code snipped    
        ̶v̶a̶r̶ ̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶=̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶"̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶"̶)̶;̶
        ̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶;̶

        var pointsObj = {};
        pointsObj.routeCenter = response.routes[0].bounds.getCenter();
        pointsObj.routeSpan = response.routes[0].bounds.toSpan();
        pointsObj.routePoints = 
             response.routes[0].overview_path
             .map( _ => ({
               lat: _.lat(),
               lng: _.lng()
             }));

        pointsDefer.resolve(pointsObj);

        clearMarkers();
        directionsDisplay.setDirections(response);
      } else { pointsDefer.reject(status); };
    });        
    return pointsDefer.promise;
}

    Notice that the above function removes the code that fills in the <textarea> with the data. Instead the code returns an AngularJS promise that resolves with the data.

    Replace the <textarea> in the HTML

    <body ng-app="app" ng-controller="ctrl as vm">
    <h2>Google Map route point generator</h2>
    Click on the map to select the route points (up to 8).
    <br/><br/>
          <input type="button" value="Get Points" ng-click="vm.calcRoute()" />
    &nbsp;<input type="button" value="Reset" ng-click="vm.reset()" />
    <br/><br/>
        <div id="map_canvas"></div>
    <br/>
         ̶<̶t̶e̶x̶t̶a̶r̶e̶a̶ ̶r̶e̶a̶d̶o̶n̶l̶y̶ ̶i̶d̶=̶"̶p̶o̶i̶n̶t̶s̶_̶t̶e̶x̶t̶a̶r̶e̶a̶"̶ ̶o̶n̶C̶l̶i̶c̶k̶=̶"̶s̶e̶l̶e̶c̶t̶_̶a̶l̶l̶(̶)̶;̶"̶>̶
         ̶<̶/̶t̶e̶x̶t̶a̶r̶e̶a̶>̶ 
    <br/>
       {{vm.points | json}}
</body>

    The App

    angular.module("app",['gMap'])
.run(function(gMap){
  gMap.initialize();
})
.controller("ctrl", function(gMap) {
  this.calcRoute = function() {
    var promise = gMap.calcRoute();
    promise.then( data => {
      this.points = data;
    })
  };
  this.reset = function() {
    gMap.reset();
    this.points = {};
  };
})

    The DEMO on PLNKR