Popover & Google Maps markers

ionic-v1
1

Hi guys – Has anyone tried or seen the popover used when clicking on Google Maps markers?

What I’m trying to do is display more information about the given place using the popover. Is that feasible? Is that the right way to achieve what I’m trying to do?

Snippet from my code (using the example found online). Map is loading, but clicking on the marker doesn’t do anything. Any help will be much appreciated.

  var marker, i;
  
  for (i = 0; i < places.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(places[i].lat, places[i].lng),
      map: map,
      icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {

        var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';

        $scope.popover = $ionicPopover.fromTemplate(template, {
          scope: $scope
        });

        $scope.openPopover = function($event) {
          $scope.popover.show($event);
        };
        $scope.closePopover = function() {
          $scope.popover.hide();
        };
        //Cleanup the popover when we're done with it!
        $scope.$on('$destroy', function() {
          $scope.popover.remove();
        });
        // Execute action on hide popover
        $scope.$on('popover.hidden', function() {
          // Execute action
        });
        // Execute action on remove popover
        $scope.$on('popover.removed', function() {
          // Execute action
        });

      }
    })(marker, i));
  }
2

Hello @xsantola I’m doing this below and it is working.
But has another problem, it’s just working in browser mode.
I try in device or simulator and nothing happened :confused:

I’m looking for solve this issue now.

    Controller Param: $compile

    var myLatlng = new google.maps.LatLng(lat, lng);
    var mapOptions = {
      center: myLatlng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      zoomControl: true
    };
    
    var map = new google.maps.Map(document.getElementById("map"),mapOptions);
    var contentString = "<div><a ng-click='initInfoPopup()'></a></div>";
    var compiled = $compile(contentString)($scope);

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map,
      icon: myIconVar,
      title: myTitleVar
    });

	marker.addListener('click', function()
	{
		map.panTo(this.getPosition());
		
		var infowindow = new google.maps.InfoWindow({ content: compiled[0] });
		infowindow.setContent(this.getTitle()+'<br>Some Text Here');
		infowindow.open(map,this);
	});

Maybe because this line: marker.addListener(‘click’…);