Comments (9)
Thanks @paodb, version 1.4.0 is helpful and thank you for introducing marker drag event.
from googlemapsaddon.
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.
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.
Hi @ijazfx can you tell me which version of the component you're using? Thanks.
from googlemapsaddon.
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.
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.
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.
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.
from googlemapsaddon.
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)
- Add a way to disable/enable google map controls
- Please add support for mapId HOT 3
- Marker is not being shown if it is added after map was added to its container HOT 3
- Add click event listener to markers
- Add controlSize feature HOT 2
- error implementing GoogleMap gmaps = new GoogleMap(apiKey, null, null); HOT 13
- Map not rendering and error thrown in browser console HOT 4
- Implement drag listener on map HOT 2
- right click on marker HOT 2
- Geocoding support
- Upgrade kml support
- Upgrade lombok to version 1.18.22 in pom.xml for Java 17 HOT 1
- Feature Marker Cluster
- The Info close button is not visible HOT 2
- Google map addon is not working in V23.2 HOT 4
- Markers: support optimized option HOT 4
- Compilation error / Vaadin 24.0.0.beta1 HOT 1
- Obtaining the right google api key HOT 1
- setTilt and setHeading HOT 1
- Prevent Google Maps V3 loading Roboto font HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from googlemapsaddon.