Google Maps Click event, not working

ionic-v1
1

Hello All, I am facing issue while trying to Add Google Maps API javascript events.
What i am doing is I am showing map to user with some markers on it. When user clicks on marker I need to display popup. But Some how My click event is not getting fired. I tried atleast for 8 hours.

Its working fine in web page or running androip app with regular javascript functionality. FYI, I am using google maps.

Any help here?Thanks in advance.

Here is one of the post where soem other user having same issue

2

Are you using data-tap-disable="true" on the map? this will allow traditonal click events to work.

3 Likes
3

Thank you that helps!!.

4

Hi there,

Iā€™ve copied the above link and created a single page (index.html), and tested in Chrome with Ripple plugin and it worked. However, after downloading it to Andriod phone form Phonegap it shows just a blank screen. any thoughts ?

Thanks in advance,
Ashok.

5

Did you set below in your android project?

#map {
  width: 100%;
  height: 100%;
}

.scroll {
  height: 100%;
}
6

Yes I did

Map 
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js">
</script>

<!-- google maps javascript -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<script type="text/javascript">
	angular.module('ionic.example', ['ionic'])

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
  //function initialize() {
    var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
    
    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
    
    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    $scope.map = map;
  //}
  //google.maps.event.addDomListener(window, 'load', initialize);
  
  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };
  
  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };
  
});
	
</script>
<style type="text/css">
	#map {
		width: 100%;
		height: 100%;
		}

.scroll {
		height: 100%;
		}
</style>

Map

Find Me
7

iā€™ve tried with and without quotes on below event
google.maps.event.addDomListener(window, ā€˜loadā€™, initialize);

8

Please share you html code.

Do you have

element of id=ā€œmapā€?

Anyway, I am sharing my code - have a look.

https://onedrive.live.com/?cid=A2180ABB1995C4E2&id=A2180ABB1995C4E2!144
Thanks
Vamsidhar M.

9

Thank you ! couldā€™t get any clicks to work, before now.

10

Typo alert in mhartingtonā€™s comment. It is data-tap-disabled =ā€œtrueā€, not data-tap-disable.
It solved my problem but took me quite some time to spot that.

1 Like