AngularJS Infowindow Button

Question

AngularJS Infowindow Button

Within my map, I have designated various locations with markers. Once a marker is clicked, an infowindow appears containing the place's name and a button. To capture these places in an array when the button within the infowindow is clicked, I require a function.

Below is the code snippet:

$scope.routes = [];
locations = data;
$scope.map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: new google.maps.LatLng(12.9716, 77.5946),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

$scope.infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    icon: {
      url: 'img/map-marker.png',
      scaledSize: new google.maps.Size(25, 25)
    },
    position: new google.maps.LatLng(locations[i].Latitude, locations[i].Longitude),
    map: $scope.map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\'' + locations[i].Name + '\');">Add</button>';
      var content = $compile(content1)($scope);
      $scope.infowindow.setContent(content[0]);
      $scope.infowindow.open($scope.map, marker);
    }
  })(marker, i));
}
$scope.AddLoc = function(x) {
  $scope.routes.push(x);
  alert($scope.routes);
}

However, upon clicking a marker while running the code, it throws an error.

An exception occurred at line 31, column 318 in http://ajax.googleapis.com ajax/libs/angularjs/1.5.8/angular.min.js

0x800a139e - JavaScript runtime error: [jqLite:nosel] http://errors.angularjs.org/1.5.8/jqLite/nosel

I would greatly appreciate any assistance or guidance in resolving this issue.

javascript angularjs twitter-bootstrap google-maps

Answer 1

Answer №1

As per the angular.js source code, the compile function creates a jqLite element. When dealing with HTML strings, it is considered valid only if enclosed within tags:

if (argIsString && element.charAt(0) !== '<') {
  throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
}

In summary, compilation fails when representing an HTML string in this format abc:

var t = $compile("abc")($scope);  //fails

If wrapped within tags, such as <div>abc</div>, the compilation succeeds:

var t = $compile("<div>abc</div>")($scope);  //succeed

Solution

Enclose tooltip HTML content within a container div element.

Replace this line:

var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>';

with

var content1 = '<div>' + locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>' + '</div>';

Demo

angular.module('mapApp', [])
  .controller('mapCtrl', function($scope, $rootScope, $compile) {
    $scope.routes = [];
    $scope.locations = [{
        Name: 'Sydney',
        Latitude: -33.873033,
        Longitude: 151.231397
      },
      {
        Name: 'Melbourne',
        Latitude: -37.812228,
        Longitude: 144.968355
      }
    ];

    $scope.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(-38.363, 131.044),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $scope.infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < $scope.locations.length; i++) {
      marker = new google.maps.Marker({
        //icon: { url: 'img/map-marker.png', scaledSize: new google.maps.Size(25, 25) },
        position: new google.maps.LatLng($scope.locations[i].Latitude, $scope.locations[i].Longitude),
        map: $scope.map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var tooltipHtml = '<div>' + $scope.locations[i].Name + '<button class="btn btn-success" ng-click="addLoc(\'' + $scope.locations[i].Name + '\');">Add</button>' + '</div>';
          var elTooltip = $compile(tooltipHtml)($scope);
          $scope.infowindow.setContent(elTooltip[0]);
          $scope.infowindow.open($scope.map, marker);
        }
      })(marker, i));
    }
    $scope.addLoc = function(x) {
      $scope.routes.push(x);
    };
  });

html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}

#map {
  height: 400px;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<div ng-app="mapApp" ng-controller="mapCtrl">
  <pre style="width: 30%; height: 400px; overflow-y: scroll; float:left;">
       {{routes | json}} 
    </pre>
  <div id="map" style="float:left; width:60%;"></div>
</div>

Answer 2

As per the angular.js source code, the compile function creates a jqLite element. When dealing with HTML strings, it is considered valid only if enclosed within tags:

if (argIsString && element.charAt(0) !== '<') {
  throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
}

In summary, compilation fails when representing an HTML string in this format abc:

var t = $compile("abc")($scope);  //fails

If wrapped within tags, such as <div>abc</div>, the compilation succeeds:

var t = $compile("<div>abc</div>")($scope);  //succeed

Solution

Enclose tooltip HTML content within a container div element.

Replace this line:

var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>';

with

var content1 = '<div>' + locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>' + '</div>';

Demo

angular.module('mapApp', [])
  .controller('mapCtrl', function($scope, $rootScope, $compile) {
    $scope.routes = [];
    $scope.locations = [{
        Name: 'Sydney',
        Latitude: -33.873033,
        Longitude: 151.231397
      },
      {
        Name: 'Melbourne',
        Latitude: -37.812228,
        Longitude: 144.968355
      }
    ];

    $scope.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: new google.maps.LatLng(-38.363, 131.044),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $scope.infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < $scope.locations.length; i++) {
      marker = new google.maps.Marker({
        //icon: { url: 'img/map-marker.png', scaledSize: new google.maps.Size(25, 25) },
        position: new google.maps.LatLng($scope.locations[i].Latitude, $scope.locations[i].Longitude),
        map: $scope.map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var tooltipHtml = '<div>' + $scope.locations[i].Name + '<button class="btn btn-success" ng-click="addLoc(\'' + $scope.locations[i].Name + '\');">Add</button>' + '</div>';
          var elTooltip = $compile(tooltipHtml)($scope);
          $scope.infowindow.setContent(elTooltip[0]);
          $scope.infowindow.open($scope.map, marker);
        }
      })(marker, i));
    }
    $scope.addLoc = function(x) {
      $scope.routes.push(x);
    };
  });

html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}

#map {
  height: 400px;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<div ng-app="mapApp" ng-controller="mapCtrl">
  <pre style="width: 30%; height: 400px; overflow-y: scroll; float:left;">
       {{routes | json}} 
    </pre>
  <div id="map" style="float:left; width:60%;"></div>
</div>

Answer 3

Answer №2

The self-invoking function seems quite questionable...

Since the marker is already within the loop scope, I don't believe it needs to be included as a parameter

Perhaps try simplifying it like this:

google.maps.event.addListener(marker, 'click', function(i) { 
  var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>';
  var content = $compile(content1)($scope);

  $scope.infowindow.setContent(content[0]);
  $scope.infowindow.open($scope.map, marker);
});

Answer 4

The self-invoking function seems quite questionable...

Since the marker is already within the loop scope, I don't believe it needs to be included as a parameter

Perhaps try simplifying it like this:

google.maps.event.addListener(marker, 'click', function(i) { 
  var content1 = locations[i].Name + '<button class="btn btn-success" ng-click="AddLoc(\''+locations[i].Name+'\');">Add</button>';
  var content = $compile(content1)($scope);

  $scope.infowindow.setContent(content[0]);
  $scope.infowindow.open($scope.map, marker);
});

AngularJS Infowindow Button

Answer №1

Answer №2

Similar questions

Setting up Jest

Issue encountered with the openpgpjs example: `'The function openpgp.encrypt is not defined'`

Utilizing PathLocationStrategy in Angular 2 with Laravel and .htaccess configurations

Passing data from an API in Vue.js to a different page

In Firefox, an error occurs when Window.getComputedStyle does not adhere to the Element interface

Is your form complete?

What is the best way to display a button only during office hours from 9am to 5pm using React.js or JavaScript?

jQuery: Modifying tags is a one-time deal

Tips for referencing an object with a semicolon included

JavaScript - Separate Artist and Title

Implementing promises in Node JS Express

I'm having trouble getting my .click method to work with the <div id=menuButton>. Can anyone help me figure out why this is happening?

Challenges in developing complex single-page applications

Analyzing the original data form versus the modified data

Associate JSON sub-string with corresponding main parent

Mobile Size Setting

Guide on embedding internet audio onto an HTML webpage

Adjusting camera orientation and field of view using trackball manipulation controls in THREEJS

What steps should be followed to execute this moment.js code in an Angular.js controller using Node.js?

Press Button to create cookie and store it in Drupal 7