AngularJS: проблемы с отображением нескольких маркеров с помощью Google Maps API - PullRequest
Новая
       7

AngularJS: проблемы с отображением нескольких маркеров с помощью Google Maps API

0 голосов
/ 17 сентября 2018

Я пытаюсь разместить на Картах Google несколько маркеров, показывающих текущее местоположение и получающее местоположение, но, похоже, карта не отображается, если местоположения являются динамическими, а не жестко заданными. В приведенном ниже коде я убрал жестко запрограммированные местоположения для текущей станции и пытаюсь динамически генерировать широту / долготу, однако в консоли я получаю синтаксические ошибки.

Я никогда раньше не использовал API Карт Google и являюсь новичком в AngularJS, поэтому мне немного неясно, что я делаю не так. Любые предложения приветствуются! 

<div class="banner">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&callback=initMap">
  </script>
</div>



 <script>
          function initMap() {
            var center = {lat: 34.052235, lng: -118.243683};
            var locations = [
              ['Current Station', {{c.profile[0].current_latitude}}, {{c.profile[0].current_longitude}}, 1],
              ['Receiving Station', -33.923036, 151.259052, 2],
            ];
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 9,
              center: center
            });
            var infowindow =  new google.maps.InfoWindow({});
            var marker, count;
            for (count = 0; count < locations.length; count++) {
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map,
                title: locations[count][0]
              });
              google.maps.event.addListener(marker, 'click', (function (marker, count) {
                return function () {
                  infowindow.setContent(locations[count][0]);
                  infowindow.open(map, marker);
                }
              })(marker, count));
            }
          }
        </script>

data.profile.push({
            name: hr.getDisplayValue('affected_employee'),
            first_name: hr.getDisplayValue('affected_employee').split(' ')[0],
            time_zone: tz,
            pcsCase: hr.getDisplayValue('number'),
            pcs_category: hr.getDisplayValue('pcs_category'),
            current_station_loc: current.getDisplayValue('name'),
            current_latitude: current.getDisplayValue('latitude'),
            current_longitude: current.getDisplayValue('longitude'),
            receiving_station_loc: currentRec.getDisplayValue('name'),
            receiving_latitude: currentRec.getDisplayValue('latitude'),
            receiving_longitude: currentRec.getDisplayValue('longitude'),
            current_station_state: current_loc,
            receiving_station_state: receiving_loc,
            effective_date: hr.getDisplayValue('proposed_effective_date'),
            state: hr.getDisplayValue('state')
        });
...