FlowingCode / GoogleMapsAddon

Vaadin Addon based on Google Maps Web Component
https://www.flowingcode.com/en/open-source/
Apache License 2.0
19 stars 7 forks source link

Add API to hide POI (point of interest) #123

Open mvysny opened 4 months ago

mvysny commented 4 months ago

Please add an API to hide the POI (points of interests). For example, on the screenshot attached, the POIs are "McDonalds" and "PlusCity".

image

mvysny commented 4 months ago

Maybe this answer could help: https://stackoverflow.com/questions/2932416/removing-directions-markers-from-the-google-maps-api-v3?rq=3 . Let me try it out.

paodb commented 4 months ago

Taking a look at this example https://developers.google.com/maps/documentation/javascript/examples/hiding-features you could do something like this to hide the POIs:

googlemap.getElement().executeJs("const styles = { hide: [{featureType: 'poi',stylers: [{ visibility: 'off' }],},],}; this.map.setOptions({ styles: styles['hide']});");

We'll investigate if we can add this feature to the API somehow.

mvysny commented 4 months ago

@paodb excellent, thank you so much, that works! Need to wait for the google-map-ready DOM event though:

    public void hidePOI() {
        // https://github.com/FlowingCode/GoogleMapsAddon/issues/123
        getElement().addEventListener("google-map-ready", e -> {
            getElement().executeJs("const styles = { hide: [{featureType: 'poi',stylers: [{ visibility: 'off' }],},],}; this.map.setOptions({ styles: styles['hide']});");
        });
    }
paodb commented 4 months ago

@mvysny I did a little more research and the styles property is part of the web-component part of the component so the rule to hide the POIs can be added without the need of waiting for the google-map-ready event. There's no Java API yet for setting the styles property but the element API can be used. As this property expects a Json Array with the styling rules, you can do something like this:

JsonArray jsonArray = Json.createArray();
jsonArray.set(0, Json.parse("{'featureType': 'poi','stylers': [{ 'visibility': 'off' }],},"));
googlemap.getElement().setPropertyJson("styles", jsonArray);

I think this workaround is better than the previous one. I will work on adding a more friendly API.