Angular-google-maps: How to show Title and Description dynamically on markers

Question

I am using Angular-google-maps, 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 calling

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

MapsMixinController as follows. Calling this controller from js code. Markers are showing & on click able to mark.

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 can I show title on mouse hover on markers? And on click how to show description on markers?

I think is just adding a new marker as said in google maps api: `var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' });` — Alejandro Teixeira Muñoz, Jun 08 '15 at 16:38
https://developers.google.com/maps/documentation/javascript/markers — Alejandro Teixeira Muñoz, Jun 08 '15 at 16:38
I mean just adding title to your markers Array, then google maps api will understand it — Alejandro Teixeira Muñoz, Jun 08 '15 at 16:39
As they say: The marker's title will appear as a tooltip. If you need to add more info, you will need a infoWindow https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple — Alejandro Teixeira Muñoz, Jun 08 '15 at 16:41

score 2 · Answer 1 · answered Aug 10 '15 at 12:15

You can add title property alone with latitude and longtitude property while 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
                });
            });
        }
    ]);

Sathish, your plunkr is about "marker" not "markers". None of the answers solves how to show a diferent title for each marker in "markerS" — JoeCool, Aug 12 '16 at 20:03

Angular-google-maps: How to show Title and Description dynamically on markers

1 Answers1