In Flutter and using the google_maps_flutter library (v0.5.28), I'm trying to find a way to capture a user drag/pan and differentiate it from calling animateCamera(...) on the map's controller. Either method equally triggers the map's onCameraMove event.
I've tried layering a GestureDetector over top of it, but the drag/pan won't pass through. **edit - what I really mean is wrapping the map in one, not actually putting one over it in a stack. Sorry.
I've tried adding custom gesture detectors to the map's gestureDetectors collection, but they don't seem to fire when I specifically wire up the onUpdate event to the PanGestureDetector I put in that collection.
Various iterations and customizations to the above.
So, I'm presenting this question with the listed qualifications:
How do I capture a user's panning the google maps widget, separating the resulting event so I can easily determine that it's a user pan versus camera animation, or even handle it completely independently?
Ultimately, I just want to capture the user drag, use that to call a setState(...) on boolean flag that I'm using elsewhere.
I fully recognize I've probably overlooked something obvious in all my rat-holing.
Thanks!
Related
From the Google Maps API, I see the getFeatureStyle function, but that requires you to pass in a feature ID. I want to change the fill/stroke opacity of the whole layer. Is this possible?
Was looking here, and tried to play around with the layer object, the only interesting functions were the set/get, which I think set arbitrary properties. Apart from that I see no way to do that, or even loop through all the features to toggle each one, which would be slow..
Here's the API.
There's no way to change the attributes of the entire layer at once. However, you can just iterate through all the features, which is pretty fast; I've got an app (not public yet, alas) that changes the appearance of 50+ very complicated coastline polygons at once, and the change is pretty much instant.
The other option would be to use GeoJSON, in particular the declarative style rules; then you can just change the values in the JSON and the display will update accordingly. You can read GeoJSON directly from the Maps Engine API.
Is it possible to create a webapp using Google Maps API V3 that uses custom images for countries or regions, that change on mouseover and mouseclick?
I have looked at google.maps.GroundOverlay and ProjectedOverlay but haven't found a solution. An example would be also great. Thank you.
Yes, it's possible..there are a couple ways to do it
One way is to use OverlayView - see demo here Showing/Hiding overlays
From the documentation:
Set the custom object's prototype to a new instance of google.maps.OverlayView(). This will effectively "subclass" the overlay class.
Create a constructor for your custom overlay, and set any initialization parameters to custom properties within that constructor.
Implement an onAdd() method within your prototype, and attach the overlay to the map. OverlayView.onAdd() will be called when the map is ready for the overlay to be attached..
Implement a draw() method within your prototype, and handle the visual display of your object. OverlayView.draw() will be called when the object is first displayed as well.
You should also implement an onRemove() method to clean up any elements you added within the overlay.
After that, you would then need to add an eventListener on the map for the click event for instance to activate this OverlayView, here's an example of how to add a click eventListener on the map https://developers.google.com/maps/documentation/javascript/examples/event-arguments
I would like to know how to create effects / animations over Google Maps markers. Specifically, I would like to zoom-in/out or "fade" a marker after a given amount of time. Could it be possible with HTML5 ? Is there any jquery effect library for doing this?
(I could use a map tile server for creating map tile overlays and re-generate tile overlays every second, but I guess it is very processing-intensive...)
Thanks in advance
I haven't seen any library to do this, and there isn't functionality in the API to fade Markers per say.
Instead, what you can do is simulate markers by creating your own Custom Overlay that looks like a marker. A custom overlay usually contains a div, which you can easily control the opacity of using JavaScript / jQuery based on a class or id you assign during the custom overlay construction.
As an example, if you look at this page you can see the is a button used to toggle the visibility, you could just as easily change that JavaScript to control the opacity of something.
I am looking at doing something similar.
If you set the marker option 'optimized: false' for all markers, each will have its own element, you can then use jQuery to select all the markers on your map using something along the lines of $('#map_canvas img[src*="filename"]'), assuming that you're using custom images for the markers.
What this doesn't address is relating each element in the array returned to a specific marker.
I think that you could add the markers to the map one at a time, re-run the jquery selector, and compare the elements returned vs. the previous run, to see which element was new. I haven't tested this part (I have what I say in the first paragraph), as I'm working towards something slightly different.
You should then be able to adjust the opacity/size of the image directly.
This might get clunky for large numbers of markers.
Paragraph two above is stupid.
Add a marker to the map, making sure to set the optimized:false option. then
var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');
The newly added marker won't have the class, so will be the only element selected. Before setting the className, you could set an ID, add the element to an array in the same index position as the corresponding marker object is held in another array, etc.
This should be a lot less clunky to implement than what I proposed previously. I'll try and come back with a working example soon.
I suppose if you knew that there were groups of markers that would share the same transform (zoom/fade), due to being the same age or whatever, then you could add all of them and only do the jQuery select at the end, before looping through the returned elements setting a class that would allow you to adjust them en-masse.
I have lots of slices of (non-geographical) data that I'm trying to
view via google maps. It basically breaks down into N 'maps', each
containing M 'layers'.
This sample shows basically what I want to do:
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html
I can get it to switch between two different maps by providing two
custom MapTypes (much like the Map/Sattelite toggle in the sample),
but I can't figure out how to make it so I can toggle on and off an
additional overlay layer (like the 'terrain' checkbox).
The official docs vaguely mention this (
http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface
) but unfortunately the bit I'm after ('See Adding MapType Controls
below') is a dead link, and I can't find this bit of the
documentation.
Does anyone know where the documentation on how to control the drop-
down toggle boxes exists?
Thanks
If you are looking to have a particular overlay appear or disappear based on a checkbox, you can check out http://geojason.info/2010/overlay-map-management-with-google-maps-api-v3/.
However, that involves checkboxes that are not actually on the map. They need to go in a sidebar or above the map or whatever. If you are hoping to be able to add things to the control where the "terrain" and the "layer" checkbox appear, I don't think there's any hooks in Google Maps API v3 to do that. I'd be happy to be wrong, but I don't think it's simple and I would expect any solution that managed to accomplish it would be brittle.
is there a way to, w/ google maps v3, listen to an event that will indicate a groundoverlay asset has been loaded? I'm loading an image onto the map and would like to be notified when the asset has completed downloading and has been presented to the client. Any ideas?
As of 2021 Dec, I can confirm that #Trott idle event will NOT work at all.
idle event fired early before any ground overlay image even start loading.
see this example
https://transparentgov.net:3200/googlemaps111/default?layer_id=7&layer=Zoning_Merge¢er_lat=33.721999270778305¢er_long=-116.28975468931803¢er_zoom=17&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FPlanning%2Fzoning1%2FMapServer&panto=0
However, in another post, I post a working example
The idea is you need use create a html image object,
new Image()
then set source let it downloading image
image.src
Then attach event
image.onload = function
The whole working source code is here
The working example is here
https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg¢er_lat=33.65789936781538¢er_long=-116.25862990762825¢er_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image
A straight reading of the Google Maps API v3 documentation would seem to suggest that this wouldn't work, but I've managed to do this using the idle event with addListenerOnce(). (If that doesn't work for you, edit your question to show the code you tried and we'll see if we can get it working.)
The idle event seems to fire exactly once as a way of sort of saying "map is loaded and ready to go" even though the documentation seems to suggest that a pan or zoom needs to happen to trigger it.
Since this is (to my knowledge) undocumented behavior (at least in any official documentation), it runs the risk of suddenly not working one day when the API is updated. You can make the choice to either live with that risk or try to guard against it by specifying the version of the API that you want in your <script> tag that loads the API.