Why won't my AngularJS Google Maps marker trigger any events?

Question

Why won't my AngularJS Google Maps marker trigger any events?

My issue is with the marker event not working on a UI Google Map. I am using this link. Here is my view setup:

 <ui-gmap-markers models="mapResult" fit="true" idkey="mapResult.id" coords="'form_geo'" click="'onclick'"  events="mapResult.events"  >

                                    <ui-gmap-windows show="show" closeClick="closeClick()">
                                         <div ng-controller="MapsDemoCtrl" ng-non-bindable>

                                                <span style="color:#000;font-weight:bold;">
                                                     Formname :  <a href='#/formspostview/{{id}}' style="color:#000;">
                                                                    {{form_name}}
                                                                 </a><br>
                                                     Username :   {{user_name}}<br>

                                                     Date     :   {{createdAt | date: "MM/dd/yyyy H:mm"}}<br>      
                                                </span>   

                                      </div>
                                    </ui-gmap-windows>
                                </ui-gmap-markers>

This is how I've set it up on the controller side:

$scope.onclick = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
    console.log("hai");
};

I'm struggling to get the marker event to work. Can anyone provide guidance on how to properly use the marker event?

javascript angularjs

Answer 1

Answer №1

Here is an illustration on how to link the click event handler to a marker using the ui-gmap-markers directive:

$scope.map.markersEvents = {
      click: function (marker, eventName, model, args) {
          //...
      }
};

Consider the following:

<ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">          
</ui-gmap-markers>

Example in action

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function ($scope, $log) {
      $scope.map = {
          center: { latitude: 40.1451, longitude: -99.6680 },
          zoom: 4,
          markers: [
          {
              id: 0,
              showWindow: false,
              city: 'New York',
              coords: {
                  latitude: 40.710355,
                  longitude: -74.001839
              }
          },
          {
              id: 1,
              showWindow: false,
              city: 'San Francisco',
              coords: {
                  latitude: 37.775404,
                  longitude: -122.437600
              }
          }]
      };
      $scope.options = { };

      $scope.map.markersEvents = {
          click: function (marker, eventName, model, args) {
              logMarkerInfo(marker);
          }
      };


      var logMarkerInfo = function(marker){
         var pos = marker.getPosition();
         document.getElementById('output').innerHTML += "Marker (" + pos.lat() + "," + pos.lng() + ")";
      };  

  });

html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
}

#map_canvas {
            position: relative;
}

.angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
}

<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options">
            <ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">
                <ui-gmap-windows show="map.showWindow" closeclick="'closeClick'" >
                    <div ng-non-bindable>{{ city }}</div>
                </ui-gmap-windows>
            </ui-gmap-markers>

        </ui-gmap-google-map>
</div>
<div id="output"/>

Answer 2

Here is an illustration on how to link the click event handler to a marker using the ui-gmap-markers directive:

$scope.map.markersEvents = {
      click: function (marker, eventName, model, args) {
          //...
      }
};

Consider the following:

<ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">          
</ui-gmap-markers>

Example in action

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function ($scope, $log) {
      $scope.map = {
          center: { latitude: 40.1451, longitude: -99.6680 },
          zoom: 4,
          markers: [
          {
              id: 0,
              showWindow: false,
              city: 'New York',
              coords: {
                  latitude: 40.710355,
                  longitude: -74.001839
              }
          },
          {
              id: 1,
              showWindow: false,
              city: 'San Francisco',
              coords: {
                  latitude: 37.775404,
                  longitude: -122.437600
              }
          }]
      };
      $scope.options = { };

      $scope.map.markersEvents = {
          click: function (marker, eventName, model, args) {
              logMarkerInfo(marker);
          }
      };


      var logMarkerInfo = function(marker){
         var pos = marker.getPosition();
         document.getElementById('output').innerHTML += "Marker (" + pos.lat() + "," + pos.lng() + ")";
      };  

  });

html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
}

#map_canvas {
            position: relative;
}

.angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
}

<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options">
            <ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">
                <ui-gmap-windows show="map.showWindow" closeclick="'closeClick'" >
                    <div ng-non-bindable>{{ city }}</div>
                </ui-gmap-windows>
            </ui-gmap-markers>

        </ui-gmap-google-map>
</div>
<div id="output"/>

Answer 3

Answer №2

Here is another way to achieve the same result: (Ensure $interval is injected into your controller)

var ctrl = this;

var count = 1;

var clock;

ctrl.map;

var lat = -23.56;

var long = -46.65;

// Start Hold To Mark Controller
var startCount = function(event){
  count = 1;
  if ( angular.isDefined(clock) ) return;
  clock = $interval(function() {
    if(count > 0){
      count = count - 1;
    } else{
      addMarker(event.latLng);
      stopCount();
    }
  }, 500);
};

var stopCount = function(){
  if (angular.isDefined(clock)) {
    $interval.cancel(clock);
    clock = undefined;
  }
};

$scope.$on('$destroy', function() {
  stopCount();
});
// End Hold To Mark Controller

// Start GoogleMaps Map Controller
function initMap() {
  if(lat == null || long == null){
    var center = { lat: -23.56, lng: -46.65 };
  } else{
    var center = { lat: lat, lng: long };
  }

  ctrl.map = new google.maps.Map(document.getElementById('map'), {
    disableDefaultUI: true,
    zoom: 12,
    center: center
  });

  google.maps.event.addListener(ctrl.map, 'mousedown', function(event) {
    startCount(event);
  });

  google.maps.event.addListener(ctrl.map, 'mouseup', function(event) {
    stopCount();
  });

  google.maps.event.addListener(ctrl.map, 'dragstart', function(event) {
    stopCount();
  });
};

function addMarker(location) {
  var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    draggable: true,
    position: location,
    map: ctrl.map
  });
  markers.push(marker);
};

initMap();
// End GoogleMaps Map Controller

This method will place a marker after a one-second hold, but if you release your finger or move it before that time elapses, the marker won't be created.

Answer 4

Here is another way to achieve the same result: (Ensure $interval is injected into your controller)

var ctrl = this;

var count = 1;

var clock;

ctrl.map;

var lat = -23.56;

var long = -46.65;

// Start Hold To Mark Controller
var startCount = function(event){
  count = 1;
  if ( angular.isDefined(clock) ) return;
  clock = $interval(function() {
    if(count > 0){
      count = count - 1;
    } else{
      addMarker(event.latLng);
      stopCount();
    }
  }, 500);
};

var stopCount = function(){
  if (angular.isDefined(clock)) {
    $interval.cancel(clock);
    clock = undefined;
  }
};

$scope.$on('$destroy', function() {
  stopCount();
});
// End Hold To Mark Controller

// Start GoogleMaps Map Controller
function initMap() {
  if(lat == null || long == null){
    var center = { lat: -23.56, lng: -46.65 };
  } else{
    var center = { lat: lat, lng: long };
  }

  ctrl.map = new google.maps.Map(document.getElementById('map'), {
    disableDefaultUI: true,
    zoom: 12,
    center: center
  });

  google.maps.event.addListener(ctrl.map, 'mousedown', function(event) {
    startCount(event);
  });

  google.maps.event.addListener(ctrl.map, 'mouseup', function(event) {
    stopCount();
  });

  google.maps.event.addListener(ctrl.map, 'dragstart', function(event) {
    stopCount();
  });
};

function addMarker(location) {
  var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    draggable: true,
    position: location,
    map: ctrl.map
  });
  markers.push(marker);
};

initMap();
// End GoogleMaps Map Controller

This method will place a marker after a one-second hold, but if you release your finger or move it before that time elapses, the marker won't be created.

Why won't my AngularJS Google Maps marker trigger any events?

Answer №1

Answer №2

Similar questions

Why is the Twitch api map function returning nothing, while the console log is showing output?

The touchstart event handler triggers but the event returns as undefined

Unusual CSS hierarchy observed post AJAX content load

What is the best way to implement ES2023 functionalities in TypeScript?

The AJAX response shows a value of "undefined"

Unable to grab hold of specific child element within parent DOM element

Developing dynamic HTML content using Android and JavaScript to insert JavaScript code into the head tag dynamically

interrupt the node script using async behavior

Determining If Props Have Been Undefined In React

What sets apart the $ and $() functions in jQuery?

AngularJS navigates to specific URL paths instead of only displaying the corresponding HTML pages

Is it possible to pass a JavaScript array to a local variable by reference?

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

When attempting to set a dynamic src tag for embedding a Google Map in a React application, an X-Frame-Options

Guide on using POST method in jQuery version 1.11.4 for tab functionality

Update object properties in Angular controller dynamically

What is the best way to implement a nested lookup in MongoDB within a field?

Angular 2 is not recognizing the element 'router-outlet'

Learn how to fetch user-selected options in Node.js and display the corresponding file contents in a textarea after submission

Strategies for Effectively Managing Null Checks in Your JavaScript Project