Multiple infowindows redirect to templates


#1

hello guys, i am new with ionic and i am building an app which has a google map templete with multiple markers.How can i redirect the infowindows to different templetes of the app?here is my code.i hve see some solutions but nothing is working :confused:

.controller(‘RdmCtrl’, function($scope, $state, $cordovaGeolocation) {
var options = {timeout: 10000, enableHighAccuracy: true};

$cordovaGeolocation.getCurrentPosition(options).then(function(position){

var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var locations = [
  ['Porto Studios', 38.1521374,23.2270006, 6],
  ['Mellisa Hotel', 38.0450982,23.5390992, 5],
  ['Elefsina Hotel' , 38.048490, 23.540285, 4],
  ['Ειδύλιον Hotel', 38.1659738,23.336649, 3],
  ['Βερόρι Hotel', 38.1678945,23.3292679, 2],
  ['Here I Am', position.coords.latitude, position.coords.longitude, 1]
];

var map = new google.maps.Map(document.getElementById(‘map1’), {
zoom: 16,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

}, function(error){
alert(‘Could not get your current location!Enable the location service and restart the application!’);

});
})

thanks in advance!!


#2

You can add another event listener to your infoWindow. Put this at the end of your for-loop:

google.maps.event.addDomListener(locations[i],'click',(function(marker, i) {
                    return function() {
                      alert('clicked ' + locations[i][0]);
                    }
                  })(marker, i));

Source: http://stackoverflow.com/a/12105459

Instead of the alert you could use $state.go() to change the view.


#3

hello @dotzilla and thanks for your answer,i tried this but nothing happent.btw each info window must redirect to a unique template.do you have any other ideas?


#4

Hey @Karanikolos,

i would have to set up a test project to check how this can be done. If i can find some spare time this weekend i will give it a try.

What do you exactly mean when you are talking about “uniqe templates”?


#5

i mean unique*,sorry.each info window will go to a unique template.for example the infowindow of “porto studios” will redirect to a template with information for “porto studios”, the infowindow of “mellisa hotel” will redirect to a template with information for “mellisa hotel” etc. Thanks for your time mate :slight_smile: