Passing from Javascript call with AngularJS Values

Question

I'm stuck and need help. I'm building a app which uses the Google Maps API and I decided to use Angular because I enjoy it's instant querying feel. But, I ran into a problem where I need to pass the values of the destination chosen (which was spit out in angular) to my already made javascript function (which would then give me the turn by turn directions I need). Been stuck for a hour, and any help would be appreciated. I tried using ng-click and making my function $scope.go = function (value) {} but still no luck. I tried getting the element chosen by name and it's text value associated, but it only returns to me the FIRST value in the list, not the specific one I clicked on. . Thanks again

Function:

function go(value) 
{

val = document.getElementById('name').text;
alert(val);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();


  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(41.850033, -87.6500523)
  };
  var map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('side'));



 var request = {
    origin: new google.maps.LatLng(41.850033, -87.6500523),
    destination: new google.maps.LatLng(33.4625,-88.8200),
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}

HTML:

<table>
<tr>
 <td>
    <input ng-model ="filterKey">
      <ul ng-repeat = "location in locations | filter:filterKey ">  <a id='name', onclick = "go(location.name)" > go {{location.name}} </a> <br> {{location.phone}} <br>  {{location.addr}} <br> <br> 




      </ul></ul>
  </td>

full code:

  <!DOCTYPE html>
<html ng-app>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>


 <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



<script>
var initialLocation = null;
var myCenter = new google.maps.LatLng(33.4625,-88.8200);
function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:11,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center: myCenter,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });


var locations = [
                  ['Harveys','33.4554015','-88.814941','food_pointer.jpg' ],
                  ['The Veranda','33.4526087', '-88.8194257','food_pointer.jpg' ],
                  ['Casa Bravo Mexican','33.4532565', '-88.8101641','food_pointer.jpg' ],
                  ['Papa Johns','33.4565651', '-88.8135248','food_pointer.jpg' ],
                  ['Umi Hibachi','33.4515882', '-88.822193','food_pointer.jpg' ],
                  ['Christy"s Hamburgers','33.454202', '-88.8312274','food_pointer.jpg' ],
                  ['Subway','33.4530025', '-88.8174516','food_pointer.jpg' ],
                  ['Petty"s BBQ','33.4530025', '-88.8174516','food_pointer.jpg' ],
                ];

for(i = 0; i < locations.length; i++)
{
  var marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1],locations[i][2]),
  icon: locations[i][3] });
  marker.setMap(map);
};

myCity.setMap(map);
}


var browserSupportFlag =  new Boolean();

  if(navigator.geolocation) {
    browserSupportFlag = true;
    alert("location Tracked");
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      alert(initialLocation);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  }
  // Browser doesn't support Geolocation
  else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
    }
    map.setCenter(initialLocation);
  }


$scope.go = function(value) 
{

val = document.getElementById('name').text;
alert(val);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();


  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(41.850033, -87.6500523)
  };
  var map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('side'));






  var request = {
    origin: new google.maps.LatLng(41.850033, -87.6500523),
    destination: new google.maps.LatLng(33.4625,-88.8200),
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}
google.maps.event.addDomListener(window, 'load', initialize);













</script>
</head>
<ul ng-init=" locations = [
                  {name: 'Harveys', type: 'American', special: 'Classic Dining' , phone: '111-222-3333', addr: '121 Cashview Ave',lat: '33.4554015', long: '-88.814941', i: '1'},
                  {name: 'The Veranda', type: 'American' , special: 'Neo Dining' , phone: '111-222-3333' , addr: '121 Cashview Ave'},
                  {name: 'Casa Bravo Mexican', type: 'Meixcan', special: 'Meixcan Dining' , phone: '111-222-3333' , addr: '121 Cashview Ave'},
                  {name: 'Papa Johns', type: 'American', special: 'Fast Food Pizza delivery' , phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Umi Hibachi', type: 'American', special: 'Japanese Dining', phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Christys Hamburgers', type: 'American', special: 'Fast Food Burgers' , phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Subway', type: 'American', special: 'Fast Food Sandwiches subs', phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Pettys BBQ', type: 'American', special: 'Fast Food barbecue southern', phone: '111-222-3333', addr: '121 Cashview Ave'}
                ]"> </ul>



<table>
<tr>
 <td>
    <input ng-model ="filterKey">
      <ul ng-repeat = "location in locations | filter:filterKey ">  <a id='name', ng-click = "go(location.name)" > go {{location.name}} </a> <br> {{location.phone}} <br>  {{location.addr}} <br> <br> 




      </ul></ul>
  </td>
    <center>
  <td  id="googleMap" align = "right" style="width:1200px;height:500px;;"> 
  </td> 
    </center>
  <td id= "side"> </td>
</tr>

</body>
</html>

move that function to your controller, don't use onclick, use ng-click - $scope.go = function(value) { your code }; then ng-click="go(location.name)" should work — Ronnie
– Ronnie, Commented Feb 25, 2015 at 20:38
@Ronnie I tried that, but maybe I'm putting it in the wrong location. Would I do that within the <ul ng-repeat> </ul> in order to keep it in the same scope, or can I do it anywhere I please (guessing that angular looks for it globally then). — Justin E. Samuels
– Justin E. Samuels, Commented Feb 25, 2015 at 20:43
you put it in your current controller. Post your controller and the HTML that says what controller you are using. — Ronnie
– Ronnie, Commented Feb 25, 2015 at 20:47
@Ronnie: Thanks again for your reply, as I'm new to angularJS I'm a little fuzzy on what exactly you're trying to describe to me. I posted by full code above in a edit, along with the edits you described for me to make. I think I done them right, but still no luck — Justin E. Samuels
– Justin E. Samuels, Commented Feb 25, 2015 at 20:53

Ronnie · Accepted Answer · 2015-02-25 22:50:35Z

You have two arrays of locations which is sort of confusing. I didn't end up creating a jsfiddle because of the external assets, but I found a few issues with the HTML that I corrected (no opening body tags, extra tags etc).

I gave your HTML page an app name of ExampleApp and the page contains a controller called ExampleController. Inside your controller, I've placed all your google maps code plus the go function. I got rid of the init you had in your HTML since $scope.locations is now the reference for that ng-repeat. I commented out most of your go function code since I wasn't sure what it should do but you can uncomment and reincorporate accordingly.

You will see in the HTML I do ng-click="go($index)" which simply references the locations array. No need to do the document.getElem...stuff

<!DOCTYPE html>
<html ng-app="ExampleApp">
<head>
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script>
    var app = angular.module('ExampleApp',[]);

    app.controller('ExampleController', function($scope)
    {
      $scope.locations = [
        {name: 'Harveys', type: 'American', special: 'Classic Dining' , phone: '111-222-3333', addr: '121 Cashview Ave',lat: '33.4554015', long: '-88.814941', i: '1'},
        {name: 'The Veranda', type: 'American' , special: 'Neo Dining' , phone: '111-222-3333' , addr: '1521 Cashview Ave'},
        {name: 'Casa Bravo Mexican', type: 'Meixcan', special: 'Meixcan Dining' , phone: '111-222-3333' , addr: '121 Cashview Ave'},
        {name: 'Papa Johns', type: 'American', special: 'Fast Food Pizza delivery' , phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Umi Hibachi', type: 'American', special: 'Japanese Dining', phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Christys Hamburgers', type: 'American', special: 'Fast Food Burgers' , phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Subway', type: 'American', special: 'Fast Food Sandwiches subs', phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Pettys BBQ', type: 'American', special: 'Fast Food barbecue southern', phone: '111-222-3333', addr: '121 Cashview Ave'}
      ];

      var initialLocation = null;
      var myCenter = new google.maps.LatLng(33.4625, -88.8200);
      var mapProp = {
        center: myCenter,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

      var myCity = new google.maps.Circle(
      {
        center: myCenter,
        radius: 20000,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
      });


      var locations = [
        ['Harveys', '33.4554015', '-88.814941', 'food_pointer.jpg'],
        ['The Veranda', '33.4526087', '-88.8194257', 'food_pointer.jpg'],
        ['Casa Bravo Mexican', '33.4532565', '-88.8101641', 'food_pointer.jpg'],
        ['Papa Johns', '33.4565651', '-88.8135248', 'food_pointer.jpg'],
        ['Umi Hibachi', '33.4515882', '-88.822193', 'food_pointer.jpg'],
        ['Christy"s Hamburgers', '33.454202', '-88.8312274', 'food_pointer.jpg'],
        ['Subway', '33.4530025', '-88.8174516', 'food_pointer.jpg'],
        ['Petty"s BBQ', '33.4530025', '-88.8174516', 'food_pointer.jpg'],
      ];

      for (i = 0; i < locations.length; i++)
      {
        var marker = new google.maps.Marker(
        {
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          icon: locations[i][3]
        });
        marker.setMap(map);
      };

      myCity.setMap(map);

      var browserSupportFlag = new Boolean();

      if (navigator.geolocation)
      {
        browserSupportFlag = true;
        alert("location Tracked");
        navigator.geolocation.getCurrentPosition(function(position)
        {
          initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          alert(initialLocation);
          map.setCenter(initialLocation);
        }, function()
        {
          handleNoGeolocation(browserSupportFlag);
        });
      }
      // Browser doesn't support Geolocation
      else
      {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
      }

      function handleNoGeolocation(errorFlag)
      {
        if (errorFlag == true)
        {
          alert("Geolocation service failed.");
        }
        else
        {
          alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
        }
        map.setCenter(initialLocation);
      }

      $scope.go = function(index)
      {
        alert('go ' + $scope.locations[index].name);
        /*var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();


        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom: 7,
          center: new google.maps.LatLng(41.850033, -87.6500523)
        };
        var map = new google.maps.Map(document.getElementById('googleMap'),
          mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('side'));

        var request = {
          origin: new google.maps.LatLng(41.850033, -87.6500523),
          destination: new google.maps.LatLng(33.4625, -88.8200),
          travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status)
        {
          if (status == google.maps.DirectionsStatus.OK)
          {
            directionsDisplay.setDirections(response);
          }
        });*/
      }
    });
  </script>
</head>
<body ng-controller="ExampleController">
  <table>
    <tr>
      <td>
        <input ng-model="filterKey">
        <ul ng-repeat="location in locations | filter:filterKey "> <a id='name' ng-click="go($index)"> go {{location.name}} </a>
          <br> {{location.phone}}
          <br> {{location.addr}}
          <br>
          <br>
        </ul>
      </td>
      <center>
        <td id="googleMap" align="right" style="width:1200px;height:500px;">
        </td>
      </center>
      <td id="side"> </td>
    </tr>
  </table>
</body>
</html>

Thank You @Ronnie , it worked flawlessly and now I seen my oversight. (trival, but easy to miss if you're new to angular). People like you really do exist ! Thanks Again
you bet, be sure to check some beginner angular tutorials though!
For sure ! Tried jumping head first in it by doing this in angular, but obviously I need more practice first @ronnie
How do I re enable my query input box ? Such when I type in "Papa" then Papa Johns would pull up. It was working earlier but stopped now after I applied the code above @ronnie
my mistake, I update the code. I removed the track by... in the repeat. Please mark the answer solved

Collectives™ on Stack Overflow

Passing from Javascript call with AngularJS Values

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related