Giter Club home page Giter Club logo

Comments (9)

ijazfx avatar ijazfx commented on June 2, 2024 1

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

from googlemapsaddon.

paodb avatar paodb commented on June 2, 2024 1

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.

from googlemapsaddon.

javier-godoy avatar javier-godoy commented on June 2, 2024

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.

from googlemapsaddon.

paodb avatar paodb commented on June 2, 2024

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

from googlemapsaddon.

ijazfx avatar ijazfx commented on June 2, 2024

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.

from googlemapsaddon.

paodb avatar paodb commented on June 2, 2024

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.

from googlemapsaddon.

paodb avatar paodb commented on June 2, 2024

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.

from googlemapsaddon.

ijazfx avatar ijazfx commented on June 2, 2024

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);
}

}
`

image

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

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

image

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.

image

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:

image

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

image

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

Thanks.

from googlemapsaddon.

paodb avatar paodb commented on June 2, 2024

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.

from googlemapsaddon.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.