anthonyhumphreys
anthonyhumphreys

Reputation: 1081

Creating multiple infowindows for markers ionic

I use google maps in my app to display certain users' locations as markers. In an infowindow i then show a brief bio, their username and a link to their profile on my platform. However, at the moment, the content in each infowindow is being displayed the same. Can anyone please help? I am quite new to angular-js and ionic, and I am aware my code is quite sloppy. For now though i just need it to work, elegance and performance/efficiency will come later on.

.controller('MapviewCtrl', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform, $compile) {
    $ionicPlatform.ready(function () {
        $ionicLoading.show({
            template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
        });


        var posOptions = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 0
        };

        $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            console.log("Current Latitude and Longitude",lat,long)
            var myLatlng = new google.maps.LatLng(lat, long);

            var mapOptions = {
                center: myLatlng,
                zoom: 14,
                maxZoom:14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            //
            function downloadUrl(url,callback) {
                var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;

                request.onreadystatechange = function() {
                    if (request.readyState === 4) {
                        //request.onreadystatechange = doNothing;
                        callback(request, request.status);
                    }
                };
                request.open('GET', url, true);
                request.send(null);
            }

            $scope.markers = [];

            var url = "xmlprovider"
            downloadUrl(url,function(data){
                var xml=data.responseXML;
                console.log("XML From Server: ", xml);
                var markers = xml.getElementsByTagName("marker");
                var userSports = window.localStorage.getItem("listOfUserActivities");

                for (var i=0; i<markers.length; i++){
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lon")));
                    var sportsArr = markers[i].getAttribute("sports");
                    $scope.chatToUserID = markers[i].getAttribute("userID");
                    for (var s=0; s<sportsArr.length; s++) {
                        if (userSports.indexOf(sportsArr[s]) > -1) {
                            $scope.user = markers[i].getAttribute("user");
                            var html = '<div><h3 style="color:#387EF5">'+markers[i].getAttribute("user")+'</h3><h4 style="color:#387EF5">'+markers[i].getAttribute("bio")+'</h4><br><a data="'+$scope.user+'" href="/#/app/userProfile/'+$scope.user+'/'+$scope.chatToUserID+'/'+markers[i].getAttribute("bio")+'">View Profile</a></div>'
                            var html = $compile(html)($scope);

                            var marker = new google.maps.Marker({
                                map: $scope.map,
                                position:  point,
                            });

                            $scope.markers.push(marker);
                            bindInfoWindow(marker, map, html);
                        }
                    }
                }
            });

            function bindInfoWindow(marker, map, html) {
                var infoWindow = new google.maps.InfoWindow({});
                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.content=html[0].innerHTML;
                    infoWindow.open(map, marker);
                    console.log(html)
                    window.localStorage.setItem("html",html);
                });
            }

            $scope.map = map;
            $ionicLoading.hide();

        }, function (err) {
            $ionicLoading.hide();
            console.log(err)
        });
    })
    $scope.chatToUser = function(user){
        console.log(user)
        var url = "app.profile/"+$scope.chatToUser
        $state.go(url)
    }
})

Upvotes: 0

Views: 838

Answers (1)

bcdan
bcdan

Reputation: 1428

The problem is that you only created one InfoWindow instance, which, in the code, is right below your map variable line. Essentially, there is exactly one InfoWindow in existence, and thus can only store one set of contents. You are reusing the same instance of infowindow at different coordinates, so they all have the same content.

This can be fixed by simply making a new InfoWindow inside the function being called by the for loop.

    function bindInfoWindow(marker, map, infoWindow) {
        var infowindow = new google.maps.InfoWindow({});
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.content=marker.html[0];
            infoWindow.open(map, marker);
            console.log(html)
            window.localStorage.setItem("html",html);
        });
    }

Upvotes: 1

Related Questions