I cant move canvas map when i scroll(touchmove event)

olaferlandsen commented 8 years ago

I have problems with event "touchmove". When i scroll (touchmove event), the map not move, so i try using $('body').bind('touchmove', function(){map.refreshLayout();});

Example: Normal

My problem(when i scroll down[touchmove event]): Error

I can't resolve it... My HTML:

<html>
    <head>
    ...
    <script>
        var div;
        var map;
        document.addEventListener("deviceready", function(){
            $(document).ready(function(){
                div = document.getElementById("canvas");
                map = plugin.google.maps.Map.getMap(div);
                map.addEventListener(plugin.google.maps.event.MAP_READY, function(){
                    $('body').bind('touchmove', function(){
                        map.refreshLayout();
                    });
                });
            });
        });
</script>
</head>
    <body>
        <div class="container-fluid">
            <div id="canvas"></div>
            <div class="row" id="items">
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
                <div class="col-xs-12">...</div>
            </div>
        </div>
    </body>
</html>

So, i need: Error

Thanks Bye

Slavrix commented 8 years ago

    <html>
    <head>
    ...
    <script>
        var div;
        var map;
        document.addEventListener("deviceready", function(){
            $(document).ready(function(){
                div = document.getElementById("canvas");
                map = plugin.google.maps.Map.getMap(div);
                map.addEventListener(plugin.google.maps.event.MAP_READY, function(){
                    $('body').bind('touchmove', function(){
                        map.refreshLayout();
                    });
                });
            });
        });
    </script>
    </head>
    <body>
        <div class="container-fluid">
            <div id="canvas">
                <div class="row" id="items">
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                    <div class="col-xs-12">...</div>
                </div>
            </div>
        </div>
    </body>
</html>

try that also you should make a plunkr or something, make it a bit easier for people to create a solution and test it quickly for you.

olaferlandsen commented 8 years ago

Well, i change this plugin for Google Maps Javascript API...

Osukarin commented 8 years ago

Hi olaferlandsen, can you resolve with the plugin??

mapsplugin / cordova-plugin-googlemaps

I cant move canvas map when i scroll(touchmove event) #734