Передача переменных из контроллера для просмотра в AngularJS

Question

Я использую библиотеку «Места» и модуль angular google places autocomplete. Функциональность автозаполнения отлично работает, результаты отображаются и выбираются при нажатии.

То, что я пытаюсь сделать сейчас, это создать карту с адреса, как только пользователь выберет один из результатов автозаполнения.

У меня есть следующая функция в мой контроллер:

$scope.$on('g-places-autocomplete:select', function(event, place) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ "address": place.name }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
      location = results[0].geometry.location, 
       lat  = location.lat(), 
       lng  = location.lng(); 

      var latlng = new google.maps.LatLng(lat,lng); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     } 
    }); 
}); 

Это не работает, и я уверен, что это потому, что он не может получить доступ к элементу map_canvas из интерфейса (который в сам находится внутри шаблона).

<div id="map_canvas" style="height:300px;"></div> 

Как я мог связать два (или передать лат и LNG переменные в веб-интерфейсе), чтобы сделать карту появляется, когда пользователь выбирает результат?

EDIT

Я сделал Plunkr, который показывает ошибку. Вы увидите, что как только вы выберете место, он сделает перенаправление, в моем случае - http: // localhost: 9000/(1.650801,% 2010.267894999999953), являясь последней частью широты и долготы.

Answer 1

Хорошо. Я скорректировал несколько вещей, в основном стилистических для моей ясности. Я думаю, что у вас были некоторые проблемы с объявлением переменной. Теперь он загружает объект карты. Я дам вам futz вокруг с, что делает его показать данные :-)

(function(){ 

    var app = angular.module('wopWop', ['google.places']); 

    app.controller('MainController', function($scope){ 
     $scope.$on('g-places-autocomplete:select', function(event, place) { 
      var loc, lat, lng, latlng, map, options, 
       geocoder = new google.maps.Geocoder(); 

      geocoder.geocode({ "address": place.name }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK && results.length > 0) { 
        loc = results[0].geometry.location, 
        lat = loc.lat(), 
        lng = loc.lng(); 
        } 
      }); 
      latlng = new google.maps.LatLng(lat,lng); 
      options = { 
       zoom: 1, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), options); 
     }); 
    }); 
})(); 

Plunkr