Updating ionic results in broken Google maps listeners

ionic-v1
1

Hey

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:

Template:

    <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>
                </label>
                <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.
                    </small>
                </div>
                <label class="item item-input">
                    <input id="pac-input" class="controls" type="text" placeholder="Adress">
                </label>
            </div>

            <div class="item item-body">
                <div id="map-canvas-add-location"></div>
            </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>
                </div>
            </div>

        </div>

    </ion-content>

Javascript:

    $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);
        $scope.initializeCenter();
        setListeners();
        fixInfoWindow();

        //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) {
            checkIfAlreadyPresent();
            $scope.placeMarker(event.latLng);
            $scope.location = event.latLng;
        });
    }

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

2

Do you mind throwing this in a codepen?

3

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

4

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
5

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:

2 Likes
6

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!