issue with several maps in tabs about gwt-maps-v3-api HOT 55 CLOSED

Are you debugging in chrome? And if so, try firefox? Most likely its the _gwt_object issue. I'll investigate more this weekend.

from gwt-maps-v3-api.

Brandon,

Do you think the maps in the demo page could be placed into tabs as an example of the behavior? It would help clean up the demos page which has gotten quite large. :)

from gwt-maps-v3-api.

Yes, that was my aim to make it cool later :) Good point :)

from gwt-maps-v3-api.

Any progress on this over the weekend Brandon? Also, when you get a chance, if you could push out the demo to your appspot account with the new Polyline example.

from gwt-maps-v3-api.

Sorry, but I've run out of time to get to this. I've also added you to the permissions of the appspot examples if you want to deploy there. I probably should change the appspot location name at some point so it makes more sense.

from gwt-maps-v3-api.

This most likely a gwt_Object issue in chrome debugging. What browser where you debuggin in?

from gwt-maps-v3-api.

I try Chrome and Firefox browser , can you add an example to resolve this problem

from gwt-maps-v3-api.

Just to confirm. Do you have more than one map widget per tab or map widget per tabs? Or could I see some of the code to help guide so I can replicate it as close as possible :) Thanks.

from gwt-maps-v3-api.

Consider not showing maps until they are used on a given tab. Otherwise you'll load a ton of map tiles on non-visible maps, slowing your page load and exacerbating your Maps API billing. You could also just use a single map and change it with foo tabs if fancied.

from gwt-maps-v3-api.

Any update on this? I noticed the same problem in this library as in the 3.8.0-pre from Google.

In my case, I create a decoratedtabpanel and on the second tab I have one map. So, when in the app, when I go to the second tab, I get mostly gray map (except for the top left corner) and where I "center" the map at (and I put a marker on) is in the very top left (maybe a 50x50px square out of 500x500). Map is created on page creation.

By Googling, I've noticed a few other people with this issue but with no posted answer or resolution.

from gwt-maps-v3-api.

What browser are you running this in that you see it, and is this during development?

from gwt-maps-v3-api.

Wow - fast response! Chrome, yes in development.

from gwt-maps-v3-api.

However, I was thinking of creating one map and not recreating for each tab click. So, when I decided to put it in the tab selection change spot (I clear the panel, and recreate the map and add to the panel), then it works fine.

from gwt-maps-v3-api.

It should work in multiple tabs. What browser are you debugging in?

from gwt-maps-v3-api.

Oops I didn't see the previous response. Thanks :)

from gwt-maps-v3-api.

Can you try firefox and let me know if it works?

from gwt-maps-v3-api.

Sure can - give me a few. I changed over the Google 3.8.0 lib when I was banging my head against the wall here, It'll take me a few to change back.

from gwt-maps-v3-api.

Same problem in Firefox...

If I create the map widget in the composite's constructor for this page - that's what I get. The map size is correct and it's the in correct panel - I also only get the "hand" cursor in that top left corner as well.

If I move it to recreate on the tab selection even, then it functions fine.

from gwt-maps-v3-api.

I wonder could i get a screen shot and maybe some code so I can replicate when I get to this issue. You can send the screen shot to my G+ Brandon Donnelson and Joseph Lust. :)

from gwt-maps-v3-api.

Just sent it over - I took out all of the superfluous stuff for code and included a screen shot.

Also, as a note - it does weird things as well when scrolling or zooming in an out - that square in the top left either turns rectangular either vertically or horizontally or the square grows (seemingly randomly) - if I have the developer console open and close it then I get entire map. Just really funky. And it does the same in the Google api library.

from gwt-maps-v3-api.

I think I share it with your other G+ profile - let me share it with your other one...

from gwt-maps-v3-api.

Thanks :) By the way, the 3.9.0 branch just changed in big ways if your linked directly to the source.

from gwt-maps-v3-api.

Adding Brian's code from G+

public class PanelLocationTracking extends Composite {
  private VerticalPanel _panel = new VerticalPanel();
  static private PanelLocationTracking _instance = null;

  static LayoutPanel sp = new LayoutPanel();

  static DecoratedTabPanel decoratedTabPanel = new DecoratedTabPanel();

  public PanelLocationTracking() {
    initPage();
    initWidget(_panel);

  }

  public static PanelLocationTracking getInstance() {
    if (null == _instance) {
      _instance = new PanelLocationTracking();
    }

    // Clear all data from page
    ResetPage();

    return _instance;
  }

  private static void ResetPage() {
    decoratedTabPanel.selectTab(0);
  }

  private void initPage() {
    decoratedTabPanel.addSelectionHandler(new SelectionHandler<Integer>() {
      public void onSelection(SelectionEvent<Integer> event) {
        switch (event.getSelectedItem()) {
        case 0: // Trips
          // GetIntialData();
          break;
        case 1:
          LatLng ll = LatLng.newInstance(33.926593, -116.937966);
          // sp.clear();
          // buildUi(ll, "Test Point");
          break;
        case 2:
          break;
        case 3:
          break;
        }
      }
    });

    // --------------------------------------------------------
    // Trip Tab Data
    // --------------------------------------------------------
    VerticalPanel panel = new VerticalPanel();
    decoratedTabPanel.add(panel, "Trips");

    // --------------------------------------------------------
    // Today's Path Data
    // --------------------------------------------------------
    VerticalPanel path = new VerticalPanel();
    path.add(sp);
    sp.setSize("500px", "500px");
    LatLng ll = LatLng.newInstance(33.926593, -116.937966);
    sp.clear();
    buildUi(ll, "Test Point");
    decoratedTabPanel.add(path, "Today's Path");

    // --------------------------------------------------------
    // Location Setting Data
    // --------------------------------------------------------
    VerticalPanel settings = new VerticalPanel();
    decoratedTabPanel.add(settings, "Location Settings");

    decoratedTabPanel.setSize("100%", "100%");
    _panel.add(decoratedTabPanel);
  }

  private static void buildUi(LatLng ll, String title) {
    final MapOptions options = MapOptions.newInstance();
    options.setCenter(ll);
    options.setZoom(9);
    options.setMapTypeId(MapTypeId.ROADMAP);
    options.setDraggable(true);

    options.setMapTypeControl(true);

    // Enable and add map type control

    // GoogleMap mapWidget = GoogleMap.create(sp.getElement(),options);
    MapImpl mi = MapImpl.newInstance(sp.getElement(), options);
    MapWidget mapWidget = MapWidget.newInstance(mi);

    MarkerOptions markerOptions = MarkerOptions.newInstance();
    markerOptions.setMap(mapWidget);
    markerOptions.setPosition(ll);
    markerOptions.setTitle(title);
    Marker marker = Marker.newInstance(markerOptions);
    marker.setMap(mapWidget);
  }
}

from gwt-maps-v3-api.

I noticed you had a release date for 3.9 in a week, and I'm not doing anything fancy right now, so I'll probably download it in a week.

I noticed it seems Google isn't doing much with their GWT libraries - almost like it's dead. Surprising, as I figured there'd be more demand. Props to you guys for working on it.

from gwt-maps-v3-api.

Thank you. Yeah, good point.

from gwt-maps-v3-api.

Is that in a popup?

from gwt-maps-v3-api.

Just out of curiosity why are using static?

from gwt-maps-v3-api.

No, it's not a popup.

I haven't gone through and cleaned up or commented all of the code - I am sure some static variables don't need to be static. Others need to be because of the overall design.

Basic design is I have a content panel in the middle that I swap out depending on a historylistener or a button click on the left. Due to the size of the app, I would rather keep the panels in memory than destroy and recreate them as well.

I will also grant you that I am newer to Java/GWT - so, there may be better ways to accomplish what I'm doing. I've only written a couple of GWT apps - one in production and this one I'm working on is in beta and in use by about a dozen users.

from gwt-maps-v3-api.

Yeah, I was wondering if that was why you were using static so they didn't get instantiated over and over. I like using gin but thats another topic. When the tab is drawn be sure to instantiate and redraw the map as well, its possible you have set the size after the tab is drawn if there is some animation, it might cause some issues. Or set the tab size explicitly. I might steer away from using static, but thats me. Even at the cost of of instantiating it from scratch its not a big difference. But anyway, theres lots of ways to do it. With out trying this my self yet I'm not sure, but I'm suspicious of the tab animation and adjusting the map size at the end.

BasicMapWidget.java

 LatLng center = LatLng.newInstance(49.496675, -102.65625);
    MapOptions opts = MapOptions.newInstance();
    opts.setZoom(4);
    opts.setCenter(center);
    opts.setMapTypeId(MapTypeId.HYBRID);

    mapWidget = new MapWidget(opts);
    pWidget.add(mapWidget);
    mapWidget.setSize("750px", "500px");

    mapWidget.addClickHandler(new ClickMapHandler() {
      @Override
      public void onEvent(ClickMapEvent event) {
        // TODO fix the event getting, getting ....
        GWT.log("clicked on latlng=" + event.getMouseEvent().getLatLng());
      }
    });

from gwt-maps-v3-api.

Good job none the less, I was in that place once too and I've don the same things :)

from gwt-maps-v3-api.

I've tried a ton of different ways and ordering (hence me banging my head against the wall) - fixed sizes, percentages, sizing before assigning the panel, sizing before assigning, along with other changes in order. I've also tried building and assigning the map in the constructor after the initwidget call as well. Eh, then I gave up...

from gwt-maps-v3-api.

Ok, something I can solve when I get to it :)

from gwt-maps-v3-api.

My Todo this weekend. Create tabbed map example.

from gwt-maps-v3-api.

Hi!

I'm having the same issue, but I'm not even using tabs. The first time I load the maps everything works fine. When I load a different map, I see a rectangular map excerpt in the top-left corner of where the whole map is supposed to be. What I find interesting is that when I resize my browser, or open the Chrome "developer tools", the map goes back to normal. Also, a friend of mine was using javascript's gmaps api (without gwt) and was seeing the same issue (when two maps were loaded in tabs), so I don't think it's a GWT issue, per se. I think he solved it by reloading the map.

On my end, I completely remove the Component that contains the Map, but the issue is still there (It's not 'hidden' in the DOM, I checked). I can send a screenshot if you'd like to see.

I've tried this in Firefox & Chrome, both in dev mode and not, and still see the same issue. Below is my Maps View class. The presenter just calls the initializeMap() method and then the drawTripMarker() for each trip.

public class TripsMapView extends Composite implements TripsMapPresenter.View {
private VerticalPanel pWidget;
private MapWidget mapWidget;

public TripsMapView() {
    pWidget = new VerticalPanel();
    initWidget(pWidget);

    draw();
}

private void draw() {
    pWidget.clear();
    pWidget.add(new HTML("<br>The latest trips..."));

    initializeMap();

}

@Override
public Marker drawTripMarker(float lat, float lon, boolean pastTrip) {

    LatLng center = LatLng.newInstance(lat, lon);
    MarkerOptions options = MarkerOptions.newInstance();
    options.setPosition(center);
    // options.setFlat(true);


    final Marker marker = Marker.newInstance(options);
    marker.setMap(mapWidget);

    //TODO: set the appropriate icon depending on the 'pastTrip' bool

// if (pastTrip)
// marker.setIcon(null);
// else
// marker.setIcon(null);

    return marker;
}

/**
 * Returns the panel contained in the InfoWindow of the marker. It's used by the presenter to populate
 * the appropriate 'detailed' view
 */
@Override
public HasWidgets drawTripWindow(final Marker marker, MouseEvent mouseEvent) {

    if (marker == null || mouseEvent == null) {
        return null;
    }

    VerticalPanel vp = new VerticalPanel();

    InfoWindowOptions options = InfoWindowOptions.newInstance();
    options.setContent(vp);

    InfoWindow iw = InfoWindow.newInstance(options);
    iw.open(mapWidget, marker);

    return vp;

}

private void initializeMap() {
    LatLng center = LatLng.newInstance(29.496675, -82.65625);
    MapOptions opts = MapOptions.newInstance();
    opts.setZoom(2);
    opts.setCenter(center);
    opts.setMapTypeId(MapTypeId.TERRAIN);

    mapWidget = new MapWidget(opts);
    pWidget.add(mapWidget);
    mapWidget.setSize("950px", "600px");


}

@Override
public void clearMap() {
    if (mapWidget != null) {
        mapWidget.removeFromParent();
        mapWidget = null;
    }

}

}

from gwt-maps-v3-api.

If you only seeing one tile, the maps will have to be told to redraw after the other actions completed. The map got initialized with a smaller size, maybe percentages(%) for width and height. Trigger the resize, and I can't remember about the best way to do that at the moment.

from gwt-maps-v3-api.

The tabs have animation which cause the maps to initialize small, then grow.

from gwt-maps-v3-api.

Resizing doesn't help. I might just have one static MapWidget in my map, and reuse it. If you're interested I can tell you if that works out fine.

from gwt-maps-v3-api.

I'm interested. :)

from gwt-maps-v3-api.

Hiding and then "unhiding" the map works fine. Every single time I need to remove all of the markers, so I keep an arraylist of Marker objects. This might not be pretty when the array grows to the thousands, but at this time it's the only option I've found. Below is the 'clearAndHide' method (I create only one instance of the map).

I'm assuming that the reason we're having this issue is with the javascript api, not gwt's implementation (as I stated before), but later on, once I'm finished with this project, I'll dig into this a bit more. Meanwhile, if you come up with a way to "refresh" the map, please let me know.

@Override
public void clearAndHideMap() {
    if (mapWidget != null) {
        MapWidget map = null;
        if (markers != null && markers.size() > 0) {
            for (Marker marker : markers) {
                marker.setMap(map);
            }
            markers = new ArrayList<Marker>();
        }
        pWidget.setVisible(false);
        hidden = true;
    }
}

from gwt-maps-v3-api.

Thanks for sharing. Yeah, the gwt api is just plugging into the js api directly most of the time. I'll take a wack at trying some work arounds once I get past the maven building and deployment. :)

from gwt-maps-v3-api.

I've been experiencing this too. It seems to be a limitation with the v3 Maps API itself. Any time the map is displayed after the page has already been loaded, the tiles aren't centered properly within the map's viewport. Add this method to your application and call it after the map has been displayed (or redisplayed):

  /**
   * This workaround as described at <a href=
   * "http://stackoverflow.com/questions/4528490/google-map-v3-off-center-in-hidden-div"
   * >StackOverflow</a> makes the map tiles center properly within the map div.
   * <p>
   * The center argument is required because the map needs to be re-centered after
   * it has adjusted to the proper bounds (without recentering, the map's
   * pre-existing center point would lie northwest of the viewport).
   *
   * @param map the MapWidget that has just been added to the DOM. Must not be null.
   * @param center The Lat/Long coordinate that should be in the center of the map's viewport.
   */
  private native void triggerResizeEvent(MapWidget map, LatLng center) /*-{
    var mapImpl = [email protected]::getJso()();
    console.log("Sending resize to ", mapImpl);
    $wnd.google.maps.event.trigger(mapImpl, 'resize');
    [email protected]::setCenter(Lcom/google/gwt/maps/client/base/LatLng;)(center);
  }-*/;

It's unfortunate that the center point has to be specified here. If the call to $wnd.google.maps.event.trigger(mapImpl, 'resize') could be worked into the MapWidget itself (perhaps in a DOM attach event handler) and MapWidget maintained the most recent requested center point, then the recentering operation could be done automatically. That would be more convenient.

from gwt-maps-v3-api.

Thanks for sharing! Hm a handler would be nice. Maybe a handler resize handler could be provided or turned on. Good idea!

Someone has contributed a resize method. And I hope to get it in this weekend. :)

from gwt-maps-v3-api.

#115 Here is the pull with change.

from gwt-maps-v3-api.

Yes. It would be nice to have that resize method from pull #115. It would keep the JSNI out of application code. :)

Might I suggest the method is named triggerResize() instead of just resize()? To me, I'd expect a method called resize() to take a size argument. Also, using "trigger" in the name is a better match for the naming in the underlying JavaScript API.

from gwt-maps-v3-api.

Great point :) I like that comment. Thanks for sharing. :)

from gwt-maps-v3-api.

I'm going to aim to have this done and released by this weekend.

from gwt-maps-v3-api.

@jfuerth Thanks for you help and suggestion. This issue has been kicking around for quite some time. 👍

from gwt-maps-v3-api.

@twistedpair @branflake2267 my pleasure! I was just about to give up hope for a Google Maps library published to Maven Central that works as-is with GWT 2.5. Your recent upload of this project to Maven Central saved me a bunch of time. So thank you!

BTW, is there a mailing list or IRC channel for this project? I've had a few small questions/comments over the past few days that I don't want to pollute your bug tracker with. :)

from gwt-maps-v3-api.

Thank you. Not yet. I don't mind you posting questions or whatever you like here b/c its easy for me to work with. I've been thinking about opening a Google+ community b/c its quite easy to work with for me, but I'm haven't fired the gun on that yet. I haven't started a Google group yet, b/c I've been worried I couldn't process it appropriately, but its been brought up. Sounds about time for one or the other. :) Feel free to post here until we do get something setup.

Thanks for posting.

from gwt-maps-v3-api.

https://plus.google.com/communities/105780740892495987648 - I created a community. I'll decorate the house later. I plan on spending some more time on the next release this weekend. :)

from gwt-maps-v3-api.

Renamed resizeMap which was just added to triggerResize
https://github.com/branflake2267/GWT-Maps-V3-Api/pull/120/files

from gwt-maps-v3-api.

I ran into the same issue. I initially tried applying triggerResize() after I created the map but I wasn't having any luck. The only way I could resolve it was to add an idle listener on the map and then call triggerResize(). Just like this:

resultMap.addIdleHandler(new IdleMapHandler() {
    @Override
    public void onEvent(IdleMapEvent event) {
        resultMap.triggerResize();
    }
});

from gwt-maps-v3-api.

@noahtaylor any idea how often this gets called? I'm not familiar with how often the IdleMapEvent is fired, but I'd worry that it might cause lots of resizing while the map is not in use. What's your experience been?

from gwt-maps-v3-api.

@twistedpair yes that is a good point. I ended up modifying my code to this:

idleHandlerReg = resultMap.addIdleHandler(new IdleMapHandler() {
    @Override
    public void onEvent(IdleMapEvent event) {
        resultMap.getJso().triggerResize();
        if (idleHandlerReg != null)
            idleHandlerReg.removeHandler();
    }
});

so it only gets called once.

from gwt-maps-v3-api.

Thanks @noahtaylor . I'm working on a revised showcase where we'll have resizing enabled as a reference implementation for folks that keep running into this problem. See #219 and add anything you think should be in there.

from gwt-maps-v3-api.