Google Maps Click event, not working

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

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


Thank you that helps!!.

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,

Did you set below in your android project?

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

.scroll {
  height: 100%;

Yes I did

<link href="" rel="stylesheet">
<script src="">
<!-- google maps javascript -->
<script src=""></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"),
    //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() {,marker);

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

    $scope.loading = ${
      content: 'Getting current location...',
      showBackdrop: false

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

.scroll {
		height: 100%;


Find Me

i’ve tried with and without quotes on below event
google.maps.event.addDomListener(window, ‘load’, initialize);

Please share you html code.

Do you have

element of id=“map”?

Anyway, I am sharing my code - have a look.!144
Vamsidhar M.

Thank you ! could’t get any clicks to work, before now.

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