CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
Roxci William
Roxci William

Reputation: 85

Add coordinates to google Maps in angular app

How can I add coordinates to google maps "center" when working with angular framework. I have coordinates displace on my page with 

coordinates: <td>{{lat}},{{lng}}</td>

I have the below code which does not work, where am I going wrong?

<google-map center="map.center" zoom="zoom" draggable="true" options="options">

I get the following error with this

Error: [$parse:syntax]

Syntax Error: Token 'latitude' is at column {2} of the expression [{3}] starting at [{4}]. Below is the controller from which the values of the coordinates are obtained:

.controller('UncatCtrl', function ($scope, $http, $routeParams) {

$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data, status, headers) {

    $scope.places = data;
    console.log(data);
    $scope.message = 'Uncategorised places';
})
$scope.id = $routeParams.id;
$scope.showplace = function(id) {
  $http({method: 'GET', url: 'http://94.125.132.253:8000/getitemdata?ID=' + $scope.id}).
      success(function(data, status, headers, config) {
          $scope.place = data;               //set view model
          console.log(data);

          console.log(id);

           $scope.view = 'templates/detail.html';
          console.log(data.place.lat);
  $scope.map =
{
center: {
  latitude : data.place.lat,
   longitude : data.place.lng,

 },
zoom: 13,

}

Upvotes: 1

Views: 938

Answers (3)

Henrik Peinar
Henrik Peinar

Reputation: 2201

The AngularJS Google Map directive works in a way which won't evaluate your expression in the center attribute. Please see the official documentation for more information and fix your code doing the following:

 // in your UncatCtrl make the following object
 $scope.map = 
 {
  center: {
   latitude: $scope.latitude, 
   longitude: $scope.longitude 
  }, 
  zoom: 14
 };

 // in your google-map html element use
 <google-map center="map.center" ...></google-map>

Here is a working fiddle http://jsfiddle.net/hpeinar/m8n9x5xn/

Upvotes: 0

Fedaykin
Fedaykin

Reputation: 4552

Please try this: on your controlller create a variable that will hold the entire string value of the attribute and then bind to it.

$scope.centerCoords = '[{latitude:' + $scope.latitude + '},longitude:{'+ $scope.latitude + '}]'

(I´m not familiar with the google maps sintax, so please forgive me if the above code ins´t accurate, just fix it if that´s the case)

And then bind it like this:

<google-map center="{{centerCoords}}" zoom="zoom" draggable="true" options="options">

By the way, is the google-map a custom directive?

Upvotes: 1

John Sterling
John Sterling

Reputation: 1111

Try this: <google-map center="[{latitude:{{latitude}},longitude:{{longitudes}}}]" zoom="zoom" draggable="true" options="options">

Upvotes: 0

Related Questions