Reputation: 887

Passing from Javascript call with AngularJS Values

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>

Upvotes: 0

Answers (1)

Ronnie

Reputation: 11198

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>

Upvotes: 2

Passing from Javascript call with AngularJS Values

Answers (1)

Related Questions