Updating ionic results in broken Google maps listeners


I just updated my ionic version (both the css and the bundle.js) to 1.0.0-beta.3. In use google maps in my application. When the user clicks on the map, a marker with a radius will be added:

All of this worked in the version i’ve used (v1.0.0-beta.1) until now. This is my template and js code:


    <ion-content has-bouncing="true" padding="true" class="has-header has-tabs">

        <div class="list card">

            <div class="item">
                <label class="item item-input">
                    <input name="name" type="text" placeholder="Name*" ng-model="info.name" required>
                <div class="error" ng-show="addlocation_form.name.$dirty && addlocation_form.name.$invalid">
                    <small class="error" ng-show="addlocation_form.name.$error.required">
                        A name is required.
                <label class="item item-input">
                    <input id="pac-input" class="controls" type="text" placeholder="Adress">

            <div class="item item-body">
                <div id="map-canvas-add-location"></div>

            <div class="item">
                <div class="range">
                    <i class="icon ion-minus-round"></i>
                    <input ng-model="info.radius" type="range" min="10" max="200" value="20">
                    <i class="icon ion-plus-round"></i>




    $scope.createMap = function () {

        //Center default on Cronos
        var lat = 51.142036;
        var lng = 4.440966;

        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(lat, lng),
            disableDefaultUI: true

        map = new google.maps.Map(document.getElementById('map-canvas-add-location'), mapOptions);

        //Adress autocomplete
        var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input'));
        $scope.adressAutocomplete = new google.maps.places.Autocomplete(input);
        $scope.adressAutocomplete.bindTo('bounds', map);

    google.maps.event.addDomListener(window, "load", $scope.createMap());

    function setListeners() {
        google.maps.event.addListener(map, 'click', function (event) {
            $scope.location = event.latLng;

Is there something I am doing wrong? Thanks in advance!

Do you mind throwing this in a codepen?

Nvm, I am just too stuck, ill keep using version 1, please close this post

Just to let you know, beta 1 had a lot of errors and have been resolved in beta 3. As we get closer to 1.0 stable, its highly suggested that you upgrade to get the more stable api.

1 Like

Can you try putting data-tap-disabled="true" in your ion-content, like this:

<ion-content has-bouncing="true" padding="true" class="has-header has-tabs" data-tap-disabled="true">

Others have had similar issues and this solved it for them:


Thanks mhartington and Calendee, I added the data-tap-disabled attribute and everyting is now up and running using the latest beta release. Thanks for this awesome framework and incredible support!