Reputation: 1081
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
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