wofficeMembersMap.js

/**
 * Draw the marker of the members on the map
 *
 * So we can see them
 */
drawMarkers: function() {

    var self = this;
    var infowindow = new google.maps.InfoWindow();

    // We loop through the members
    for (var i = 0; i < this.members.length; i++) {

        var memberLocation = this.members[i];

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(
                parseFloat(memberLocation.lat),
                parseFloat(memberLocation.long)
            ),
            map: self.mapObject
        });

        var htmlContent = '';

        htmlContent += '<div class="text-center">';
        htmlContent += '<img src="'+ memberLocation.avatar_url +'" class="w-50 rounded rounded-circle">';
        htmlContent += '<h3 class="d-block mb-0 mt-2">'+ memberLocation.user_info.data.display_name +'</h3>';
        htmlContent += '<i>'+ memberLocation.user_info.data.user_email +'</i>';
        htmlContent += '</div>';

        google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
                infowindow.setContent(htmlContent);
                infowindow.open(self.mapObject, marker);
            }
        })(marker));
    }
},