Marker does not appear if maps component in a separate tab

[ijazfx]

I'm facing a weird issue. I've create a component which has a tab to show Google Map with marker details.
The issue is when I select the tab to show map, it does not show the marker. But if I create a button on the same tab and explicitly add the marker, it shows.

Seems like there is some synchronization issue. Pls advise.

[javier-godoy]

Hello. If the component is in another tab, it will be reattached when the tab is shown, which may causes some issues. We'll investigate the case.

[paodb]

Hi @ijazfx can you tell me which version of the component you're using? Thanks.

[ijazfx]

Hi @paodb I'm using 1.3.0 maven dependency.
I would also need to know if there is any way we can capture marker location when dragged. We're using the component for Geo Tagging some facilities.

[paodb]

Hi @ijazfx. Regarding the markers location on drag end, we're adding the DragEndEvent in our next release (see #40). Meanwhile you can achieve it like this:

addMarker.getElement().setProperty("dragEvents", true);
addMarker.getElement().addEventListener("google-map-marker-dragend", event -> {
        JsonObject eventData = event.getEventData();
        JsonObject latLng = eventData.getObject("event.detail.latLng");
        Notification.show("Lat: " + latLng.getNumber("lat") + " - Lng: " + latLng.getNumber("lng"));
      }).addEventData("event.detail.latLng");

We'll investigate the tabs issue and get back to you.

[paodb]

Hi again @ijazfx. I did a simple example trying to replicate the behavior you mentioned about marker not showing when map is displayed on tab selection. I have two tabs and two maps with markers, when I navigate through the tabs, maps & markers are showing correctly:

public class MainView extends VerticalLayout {
			    
    private static final double LAT = -31.636036;    
    private static final double LON = -60.7055271;
        
	public MainView() {
	    	    
	    this.setSizeFull();
		String apiKey = System.getProperty("google.maps.api");	  
		
		GoogleMap gmaps = new GoogleMap(apiKey, null, null);       
		gmaps.setMapType(GoogleMap.MapType.SATELLITE);
        gmaps.setSizeFull();
        gmaps.setCenter(new LatLon(LAT, LON));
        gmaps.addMarker("Center", new LatLon(LAT, LON), true, Markers.BLUE);
        
        GoogleMap gmapsTab2 = new GoogleMap(apiKey, null, null);
        gmapsTab2.setMapType(GoogleMap.MapType.ROADMAP);
        gmapsTab2.setSizeFull();
        gmapsTab2.setCenter(new LatLon(LAT, LON));
        GoogleMapMarker marker = new GoogleMapMarker("Center", new LatLon(LAT, LON), true, Markers.ORANGE);
        gmapsTab2.addMarker(marker);
        	    
        Tab tab1 = new Tab("Tab one");
        Div page1 = new Div();
        page1.setSizeFull();
        page1.add(gmaps);

        Tab tab2 = new Tab("Tab two");
        Div page2 = new Div();
        page2.setSizeFull();
        page2.add(gmapsTab2);
        page2.setVisible(false);

        Map<Tab, Component> tabsToPages = new HashMap<>();
        tabsToPages.put(tab1, page1);
        tabsToPages.put(tab2, page2);
        Tabs tabs = new Tabs(tab1, tab2);
        Div pages = new Div(page1, page2);
        pages.setSizeFull();

        tabs.addSelectedChangeListener(event -> {
            tabsToPages.values().forEach(page -> page.setVisible(false));
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
        });

        add(tabs, pages);    
	}	
}

Is your implementation somehow similar? if not, can you share an example that reproduces your issue?

Regards.

[ijazfx]

Hi @paodb Here is simple code:

`package com.xyz.abc;

import com.flowingcode.vaadin.addons.googlemaps.GoogleMap;
import com.flowingcode.vaadin.addons.googlemaps.GoogleMapMarker;
import com.flowingcode.vaadin.addons.googlemaps.LatLon;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class GoogleMapComponent extends VerticalLayout {

private GoogleMap map;
private GoogleMapMarker marker;

public GoogleMapComponent(String apiKey) {
    setSizeFull();
    map = new GoogleMap(apiKey, null, null);
    double LAT = 0;
    double LON = 0;
    map.setCenter(new LatLon(LAT, LON));
    marker = map.addMarker("Center", new LatLon(LAT, LON), true, "");
    map.setSizeFull();
    add(map);
}

public void initialize() {
}

public void setLocation(String caption, Double lat, Double lng, Integer zoom) {
    // LatLon pos = new LatLon(lat, lng);
    // map.setCenter(pos);
    // marker.setPosition(pos);
}

}
`

The setLocation(...) method is called from the parent component when tab is changed.

If I uncomment the code of setLocation(...) following happens:

Now if I zoom out, the marker is still at the old location, although setLocation changed map center and zoom, but it couldn't update marker location.

Also if I create a marker in setLocation(...) as follows:

`public class GoogleMapComponent extends VerticalLayout {

private GoogleMap map;
private GoogleMapMarker marker;

public GoogleMapComponent(String apiKey) {
    setSizeFull();
    map = new GoogleMap(apiKey, null, null);
    double LAT = 0;
    double LON = 0;
    map.setCenter(new LatLon(LAT, LON));
    map.setSizeFull();
    add(map);
}

public void initialize() {
}

public void setLocation(String caption, Double lat, Double lng, Integer zoom) {
    LatLon pos = new LatLon(lat, lng);
    map.setCenter(pos);
    map.setZoom(zoom);
    if (marker != null) {
        map.removeMarker(marker);
    }
    marker = map.addMarker("Center", pos, true, "");
}

}`

Following is the output:

And with the same code when I select another tab and then come back to maps tab I see the marker:

I hope this will help understand the issue I'm facing.

Thanks.

[paodb]

Hi @ijazfx, first of all, please take in consideration that today we made a new release with some fixes, new version is 1.4.0. There was a bug on setPosition method that you're using in the first example, updating to the new version sould fix that issue.

I'm still trying to figured out what's wrong with your second example, I was able to reproduce it but not sure why marker is not rendered the first time when adding it in your setLocation method.

[ijazfx]

Thanks @paodb, version 1.4.0 is helpful and thank you for introducing marker drag event.

[paodb]

Hi @ijazfx there's a new released version of the addon, version 1.6.0. Could you give it a try? The issue with the marker should be fix now.