Does autoPan on marker works?

piernik commented 9 years ago

In docs I see 'disableAutoPan' option to switch off autoPan when marker is clicked. I set this to disableAutoPan=false and still don't have autoPan animation.

Here is my code:

map.addMarker({
                        'position': punkt,
                        'title': atrakcja.tytul,
                        disableAutoPan: false,
                        icon: (wzgledem && wzgledem.id == atrakcja.id) ? "#000000" : _this.kolory[styl],
                        'markerClick': function (marker) {
                            marker.showInfoWindow();
                            //and something
                        },
                        'infoClick': function (marker) {
                            //something
                        }
                    });

hirbod commented 9 years ago

If you want to use autopan on click, please do not use "disableAutoPan". If you wan't to disable, disableAutoPan: trueis right. By default, click will autopan

piernik commented 9 years ago

It's not autoPanning for me :/

hirbod commented 9 years ago

I'm not sure, but try to remove infoClick, maybe this cause the problem.

hirbod commented 9 years ago

And try to avoid anonymous functions on your click-events. Put them outside. (reduce memory)

function myClickFunction(marker){
}

...
map.addMarker({
   ...
   ....
   markerclick: myClickFunction
});

piernik commented 9 years ago

It's not working at all I left only position and title

hirbod commented 9 years ago

could you show me a short video recording the situation?

hirbod commented 9 years ago

Be sure, that title is set and position is a latLngObject.

piernik commented 9 years ago

Is there any extra condition in plugin code for autoPanning? ex zoom>=10 or must be closer than 10 km from center? Everything is set - I have marker

hirbod commented 9 years ago

No, I've tested right now, everything works as expected. As soon as I click on a marker, it will be centered as pointed out in the documentation

piernik commented 9 years ago

It's not working for me but it's not that important. thanks for help

hirbod commented 9 years ago

Maybe @wf9a5m75 can help out

wf9a5m75 commented 9 years ago

@Hirbod Thanks for your help.

@piernik Could you take a short video for us?

piernik commented 9 years ago

I don't know how:) Leave it - if it works for You than I had to mix something.

hirbod commented 9 years ago

On OSX, simply with Quicktime Player, it can record the whole screen or some parts of it. By the way, do you have the problem on iOS or on Android?

We don't want to leave it, maybe it is really a bug and we can fix it

piernik commented 9 years ago

I'm using only android. Ok I'll try to isolate bug if there is one.

hirbod commented 9 years ago

Some more details were fine. Version, Emulator, Device? Just tested on Genymotion and on Sony Xperia (real device), works well here.

piernik commented 9 years ago

Here is code that is not working:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Nav bar</title>

    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
</head>

<body ng-app="ionicApp">
<ion-nav-view></ion-nav-view>
</body>

<script id="app/app.html" type="text/ng-template">
    <ion-side-menus enable-menu-with-back-views="true">
        <ion-side-menu-content>
            <ion-nav-bar class="bar-positive">
                <ion-nav-back-button>
                </ion-nav-back-button>

                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                    </button>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="page" class="wrapper"></ion-nav-view>
        </ion-side-menu-content>
    </ion-side-menus>
</script>

<script id="app/index.html" type="text/ng-template">
    <ion-view title="Index">
        <ion-content has-bouncing="true" scroll="true">
            <div id="map" style="width:100%; height:400px;">

            </div>
        </ion-content>
    </ion-view>
</script>

<script>
    angular.module('ionicApp', ['ionic', 'ngCordova'])
            .config(function ($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/app/index');
                $stateProvider
                        .state('app', {
                            url: "/app",
                            abstract: true,
                            templateUrl: "app/app.html"
                        })
                        .state('app.index', {
                            url: "/index",
                            views: {
                                'page': {
                                    templateUrl: "app/index.html",
                                    controller: "indexCtrl as vm"
                                }
                            }
                        })
            })
            .controller('indexCtrl', function ($scope, $timeout) {
                var vm = this;
                var map = null;
                ionic.Platform.ready(function () {
                    $timeout(function () {
                        init();
                    }, 1000);

                });

                function init() {
                    console.log('init');
                    if (window.plugin) {
                        console.log('has plugin');
                        map = window.plugin.google.maps.Map.getMap();

                        map.on(plugin.google.maps.event.MAP_READY, function () {
                            console.log('map is ready');
                            map.setDiv(document.getElementById("map"));
                            map.setOptions({
                                'controls': {
                                    'compass': true,
                                    'myLocationButton': true,
                                    'indoorPicker': false,
                                    'zoom': true
                                }
                            });

                            var point = new window.plugin.google.maps.LatLng(51.9874, 19.0162);
                            map.addMarker({
                                'position': point,
                                'title': "Poland"
                            });

                            var point2 = new window.plugin.google.maps.LatLng(19.9874, 50.0162);
                            map.addMarker({
                                'position': point2,
                                'title': "Arabia"
                            });
                            map.setVisible(true);
                            map.refreshLayout();
                        });
                    }
                }
            })
    ;
</script>
</html>

When clicking on markers nothing happens ony infoWindow aprears - no animation.

I'm testing on device with android 4.2.1 using ionic rc.3 - no crosswalk

piernik commented 9 years ago

any news on this?

hirbod commented 9 years ago

Could you provide me your project when possible? Upload somewhere and send to

 info []æ[] nightstomp.com

erasmo-marin commented 9 years ago

I have exactly the same problem. Android 4.4.4, Phonegap cli 5.1.1 and Phonegap build service, I also tried disableAutoPan=false, but nothing happens. Is it a bug??

adaniello commented 8 years ago

Also for me this issue: on iOS (emulator or not) works fine; on Android (emulator, 4.1, 4.4 and 5) not works. I tried also sample demo apps in plugin folder, but nothing.

This is not a big issue, but i'll try to investigate on it.

mapsplugin / cordova-plugin-googlemaps

Does autoPan on marker works? #488