Comments (12)
You can change the animate duration using the duration
parameter.
And could you show me your snippet code that you imagine for 'animated' flag?
The biggest problem is that the native side can not detect when CSS transition is started.
Because W3C does not define an event when the transition starts.
That's why the map can not move with the div tag.
One solution I can give you is that if your Javascript can detect when the div slides, you can generate an image data using map.toDataURL(). You can pass it to tag.
It means:
(1) generate the image using toDataURL()
(2) then insert the map div, and hide the map
(3) the sliding start
(4) show the map, and remove the image when the sliding is finished.
However map.toDataURL() takes a few time (how long is depends on device).
As far as my test, Android works good with this idea, but iPhone takes the time longer.
So in my example code, I just hide the map when the slide bar is opened,
then show the map again after moving is finished.
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/master/example/v1.0.9-example/js/example.js#L55
from cordova-plugin-googlemaps.
Thanks again for the quick response.
Your example hiding the map makes good sense.
You're of course right - you can't listen out for CSS transition events. Even if you could, I'd suspect you'd have a hard time keeping the map position properly in sync with the DOM.
I like your idea of using toDataURL. That feels like it could work quite well. As a work-around to the fact that it takes time for the cordova bridge to pass the data URL back to the DOM I'd suggest that one could periodically update a cached image so it's there ready, so you wouldn't have to call toDataURL when the "click to move map" happens. I'm thinking one could listen for an event that says "the map has finished updating" and then grab an image.
My own use-case is simpler than your example - given the design I'm working with I don't need to worry about syncing up the animation of the map with other things in the DOM as I only need to move the map itself.
As for code snippets, I was thinking that one would do something like this:
// update position of map holder element
mapHolder.classList.add("offset");
// refresh plugin map position, asking for it to be animated
map.refreshLayout(true);
The "offset" class would just do an abrupt position change of the mapHolder (the element that had been set as the div for the map).
This would mean that refreshLayout in googlemaps-cdv-plugin.js would change to:
App.prototype.refreshLayout = function(animated) {
onMapResize(undefined, animated);
};
and onMapResize would become:
function onMapResize(event, animated) {
var self = window.plugin.google.maps.Map;
var div = self.get("div");
if (!div) {
return;
}
if (isDom(div) == false) {
self.set("div", null);
cordova.exec(null, self.errorHandler, PLUGIN_NAME, 'setDiv', []);
} else {
var divSize = getDivSize(div);
cordova.exec(null, self.errorHandler, PLUGIN_NAME, 'resizeMap', [divSize, animated]);
}
}
I can probably come up with some Obj-C code for the iOS plugin too if that'd help.
from cordova-plugin-googlemaps.
Thanks for your idea. I also have been considering the pre-cached idea, but I haven't tested yet, because I don't have enough time.
Could you show me some Obj-C code? I will consider this.
from cordova-plugin-googlemaps.
I'll endeavour to try to whip up some Obj-C code later today that animates the position change on iOS.
from cordova-plugin-googlemaps.
Thank you
from cordova-plugin-googlemaps.
Pull request includes code that implements this idea (animated flag on JS map.refreshLayout method), much as described above.
Only iOS code has been implemented, but Android should be unaffected. I've also not had a chance to try this out to see if it affects non-embedded maps.
from cordova-plugin-googlemaps.
@stevesims
This feature will not implement in version 1.0.12, because I need more test and adjustment.
Also I need the time to implement for Android.
So if you want to use this feature, please do it on your fork.
However this feature will be implemented in near the feature.
from cordova-plugin-googlemaps.
I've finally got around to implementing my Android code for this. My "android-slide" branch now includes this code.
I wouldn't say this is really finished per-se. My code works, but the animation duration is hard-coded (this should really have a setting, as we've previously discussed). The code probably could be significantly tidier/shorter too.
The animation code sits inside the updateMapViewLayout method inside GoogleMaps.java. This will use a more efficient TranslateAnimation if the view is only moving (i.e. it's width and height are staying the same), otherwise it uses a custom ResizeMoveAnimation (implemented in ResizeMoveAnimation.java).
This code is not extensively tested - but it works for me! :-)
from cordova-plugin-googlemaps.
Sorry for late response. And thank you @stevesims , I will check in couple of days.
from cordova-plugin-googlemaps.
Implement this feature for iOS in v1.2.0.
from cordova-plugin-googlemaps.
The animation causes the map center position is misaligned.
(The map center position moves to left-top)
I need more test, and I detach the code from v1.2.0 temporally.
from cordova-plugin-googlemaps.
dropped for now due to limited time
from cordova-plugin-googlemaps.
Related Issues (20)
- Automatically get the center of the map and place a marker?
- Any fork that is being maintained? HOT 2
- iPad Orientation issue with Google Maps plugin MyPluginLayer
- warning: google.maps.event.addDomListener() is deprecated, use the standard addEventListener()
- Zoom controls not responding
- Google Maps app is not installed or disabled error HOT 1
- CSS injection problem in all project pages.
- Use tileOverlay from Zoom Level 14 in higher Zoom levels
- Support for latest Android and iOS Versions HOT 17
- Googlemaps is not installed or not ready yet HOT 1
- Clean project cordova 11, only gray background no map loaded inside div HOT 3
- Android app crash on LocationService .getMyLocation()
- Huawei with no Google Services Issue
- Map does not load on Android : CordovaGoogleMaps.traceDomTree
- Build Error: Could not find com.android.volley:volley:1.1.1.
- Cordova iOS 7.0.1 'cordova/CDVCommandDelegateImpl.h' file not found HOT 14
- Installing iOS error HOT 1
- BSF Cordova Ecosystem Crowdfunding Plan
- cordova-plugin-googlemaps, map showing a blank screen. Ionic Cordova Angular HOT 4
- Unable to load custom image for map marker "There is no file at '//private/var/containers/Bundle/Application/F14E3528-E405-44D6-81AA-91C752E927E5/DOT%20Appname.app/www/img/city-driver-icon-1.png'."
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cordova-plugin-googlemaps.