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.


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!