Angular-google-maps: how to dynamically display marker name and description

Question

I am using Angular -google-maps, the HTML code follows

  <ui-gmap-google-map center='mapData.map.center' zoom='mapData.map.zoom' events="mapEvents"> <ui-gmap-markers models="mapData.map.markers" coords="'self'"> </ui-gmap-markers> </ui-gmap-google-map> 

in JS call

 angular.extend(this, $controller('MapsMixinController', {$scope:$scope, map:mapData.data[0].map})); 

MapsMixinController as follows. Call this controller from js code. Markers are displayed and can click on the icon.

MapsMixinController.js

 /** * Controller providing common behaviour for the other map controllers */ angular .module('app') .controller('MapsMixinController', ['$scope', 'GeolocationService', 'uiGmapGoogleMapApi', 'map', function($scope, GeolocationService, GoogleMapApi, map) { var _this = this; $scope.mapEvents = { click: function(mapModel, eventName, originalEventArgs) { var e = originalEventArgs[0]; if (e.latLng) { $scope.mapData.map.markers.push({ id: new Date().getTime(), latitude: e.latLng.lat(), longitude: e.latLng.lng() }); // This event is outside angular boundary, hence we need to call $apply here $scope.$apply(); } } }; // Returns a default map based on the position sent as parameter this.getDefaultMap = function(position) { return { markers: [], center: { latitude: position.coords.latitude, longitude: position.coords.longitude }, zoom: 14 }; }; // Initialize the google maps api and configure the map GoogleMapApi.then(function() { GeolocationService().then(function(position) { $scope.mapData.map = map || _this.getDefaultMap(position); }, function() { $scope.error = "Unable to set map data"; // TODO use translate }); }); } ]); 

How to show heading when hovering over markers? And click how to display the description on markers?

Answer 1

You can add the title property only with latitude and longitude by creating marker data.

  /** * Controller providing common behaviour for the other map controllers */ angular .module('app') .controller('MapsMixinController', ['$scope', 'GeolocationService', 'uiGmapGoogleMapApi', 'map', function($scope, GeolocationService, GoogleMapApi, map) { var _this = this; $scope.mapEvents = { click: function(mapModel, eventName, originalEventArgs) { var e = originalEventArgs[0]; if (e.latLng) { $scope.mapData.map.markers.push({ id: new Date().getTime(), latitude: e.latLng.lat(), longitude: e.latLng.lng(), title: "Mouse over text" }); // This event is outside angular boundary, hence we need to call $apply here $scope.$apply(); } } }; // Returns a default map based on the position sent as parameter this.getDefaultMap = function(position) { return { markers: [], center: { latitude: position.coords.latitude, longitude: position.coords.longitude }, zoom: 14 }; }; // Initialize the google maps api and configure the map GoogleMapApi.then(function() { GeolocationService().then(function(position) { $scope.mapData.map = map || _this.getDefaultMap(position); }, function() { $scope.error = "Unable to set map data"; // TODO use translate }); }); } ]);