I am experiencing the same problem as described here. As the suggestion in the referenced issue did not solve my problem, I'm hoping someone has additional insight that might help me out.
I'm using gwt 2.5.1 and gwt-maps 3.8.0. As shown in the images in the reference, my map is partially displayed in the upper left corner and only fills the panel when I manually re-size the browser. The problem is present in both FF and IE9.
Here is a partial screen shot. The map controls are placed in about the correct locations. Its just the map tiles that are not displayed.
I've tried using Scheduler.scheduleDeferred to defer creation of the map without success. I also used scheduleDeferred to resize the map as shown below without success
private final native void resizeMap(GoogleMap map) /*-{
$wnd.google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}-*/;
My html body contains a div (id "map-container") which I pass to GoogleMap.create().
Element mapDiv= DOM.getElementById("map-container");
VerticalPanel mapPanel.add(RootPanel.get("map-container"));
...
GoogleMap.create(mapDiv, mapOptions);
The hierarchy looks like:
DockLayoutPanel (added to the RootLayoutPanel)
DockLayoutPanel
SimplePanel
Caption Panel
DockLayoutPanel
DeckPanel
VerticalPanel (mapPanel)
mapDiv
GoogleMap
Any suggestions are greatly appreciated!
Related
I have created an Ionic 2 / Angular 2 App. I have integrated Google Maps and it works fine. However the second time the Google Maps appears completely gray. I have searched the internet and tried different solutions to solve it. However, none of the solutions below work:
- google.maps.event.trigger(this.map, 'resize');
- google.maps.event.clearInstanceListeners / this.map.detach(); / this.marker.setMap(null);
When I resize the view in chrome then the maps which appeared in gray is suddenly shown. So how can I trigger this resize manually. I hope you can help.
My code can be found here https://github.com/marinusgeuze/metjekindnaarbuiten.
Best regards,
Marinus Geuze
===========================================
Issue is solved by adding next line of code:
setTimeout(() => google.maps.event.trigger(this.map, 'resize'), 600);
I didn't have exactly the same issue, but something similar happen when using LeafletJS in my Ionic 2 app, and a call to their invalidateSize function on a small timeout fixed the issue for my app. Here's an example:
ionViewLoaded() {
console.log('ObservationDetails.ionViewLoaded');
// Leaflet setup calls here
...
// invalidateSize must be called because the page hasn't been drawn, only loaded,
// and the map div will get resized causing the "gray block/unloaded map tile"
// problem. Invalidating the map will fix that, but the call needs a slight
// delay before firing...
setTimeout(() => this.map.invalidateSize(), 600);
}
Solution for map, Use Below code of line to resolve the issue :
// you must use "map" variable name, or you can use your defined variable name
// Example : var map = (new google.maps.Map(...));
setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
I want to make content in SlidingDrawer as dragable area too.
For example, I'm opening SlidingDrawer via fling gesture on handle and closing it via fling gesture on content.
What methods will I need to override? Or maybe it already exists in some libraries are?
I know this is a late reply but I've been having a similar problem and have found a solution that should work for static content views. It won't work if you need to check for touch events in the content area but if you just have static text/images that don't change it should work.
I copied the source code file and basically just add the code below to the public boolean onInterceptTouchEvent(MotionEvent event) method. Basically it just adds the content are to the acceptable area for dragging.
/* Within the onInterceptTouchEvent() method (Line 341) */
final Rect frame = mFrame;
final View handle = mHandle;
final View content = mContent;
handle.getHitRect(frame);
content.getHitRect(frame);
/* Source continued below */
Unfortunately I haven't found a solid solution if your content area needs to be able to scroll/touch and hopefully will find something soon.
I'm failrly new to LibGDX and I'm running into a problem.
I'm building a classically styled RPG/Adventure game in which I'm using a TiledMap(-Renderer) to create the map. I've followed different tutorials but can't get it to work. (last one was DPG's: Full working example link)
What I need, is a column of buttons on the right side of the screen (implemented that through ImageButtons). One of these buttons lead to a settings-kind of screen and another one should lead to the game map. Under a ClickListener of the button I've added DPK's code of
MapHelper map = new MapHelper();
map.setPackerDirectory("data/packer");
map.loadMap("data/world/level1/level.tmx");
map.prepareCamera((int)stage.getWidth(), (int)stage.getHeight());
map.getCamera().update();
map.render();
The MapHelper class is an exact copy of dpk's, only change above is the setting of the width and height of the camera. Any suggestion what I'm doing wrong here?
I don't think you want to invoke map.render() in the ClickListener callback. That would mean the map is only rendered when you click, and then not re-rendered (generally everything gets re-rendered on every screen re-fresh).
I think you need to track the map in your application class, and in the ClickListener callback you need to set a flag or somehow "enable" the map (perhaps setting it to something other than null). Then in the application's render() method you can check to see if the map should be rendered or not, and render it if so.
Specifically, move the calls to prepareCamera, getCamera and render out of the ClickListener.
I am having problems with centering the map using the panTo() method - as well as making the directions (from/to) to work like tabs.
Here is my code:
http://dpaste.com/76251/
I'm not too sure what you want the map to do, but there is one big problem with your panTo() function. You placed it inside of the function markerClickHandler() which is called when the markers are created, which happens on page load. So you are calling panTo() three times when the page is loaded.
If you want it to be called when the marker is clicked, place it in the function which is returned by markerClickHandler().
Keep in mind, however, that the movement will likely be interrupted by the opening of the Info Window (which moves the map). The best solution I can think of to that problem is to move the map after the window has opened. You can pass onOpenFn as a GInfoWindowOptions parameter:
map.openInfoWindowTabsHtml(marker.getLatLng(), tabs, {
onOpenFn: function() {
map.panTo(marker.getLatLng());
}
});
Note: for some reason, this only worked if I called openInfoWindowTabsHtml() on the map object instead of the marker - I don't know why.
The example snippet you're linking to is no longer available, but assuming from the answer by Chris, I'm assuming you want to center the marker whose info window was opened. I had the same problem and solved it like this:
GEvent.addListener(marker, 'infowindowopen', function() {
map.panTo(marker.getLatLng());
});