Custom maps icons descriptions

Support
#1

Can I have custom maps icons descriptions, i.e. have custom shapes, fonts and colors?

text

#2

Hi Alex

you can set marker icons to non-standard icon, yes. Also you can customize standard Google Maps info windows but only by the means of CSS. Generally speaking you pretty much restricted by what Google Maps 3.10 can do.

#3

In order to set marker icon without extending application theme you could simply write something like this:


        Marker marker = map.createMarker("Test marker", coordinate, false);
        marker.setIconUrl("VAADIN/pin.png");
        map.addMarker(marker);

Where “pin.png” is an icon you put in yourproject/modules/web/web/VAADIN directory as a static resource.

You can use Studio to create theme extension (refer to this documentation: [url=Extending an Existing Theme]https://docs.cuba-platform.com/cuba/6.0/manual/en/html-single/manual.html#web_theme_extension[/url]). After creating theme extension you can put your CSS styles into halo-ext.scss file. For instance:


@import "../halo/halo";

@mixin halo-ext {
  @include halo;

  /* Map info window */
  .gm-style .gm-style-iw div {
    font-weight: 500;
    font-size: 13px;
  }
}

this SCSS file will make Info Window content font bolder. You can add additional styles in order to change font, background color etc.

#4

Igor, thanks for your response.
As far as I understand, this will allow me to modify InfoWindow font, but can I change InfoWindow itself? It’s size, shape and color?

#5

You can set its size in code and you can change things like background color, border radiuses etc with CSS selectors.
We use standard google maps Info Windows. They have limited support of styling but it is not a problem to change things like colors, shadows etc via CSS.

#6

Ok, got it. I checked the CSS selectors that I can use to do this - as you mentioned we can use gm-style-iw class selector but in this case we can change the font of the info window but not the info-window style. And the info-window itself has no class selector - only div element with inlined style parameters. Could you please advice how can I change the style of the info-window - for example change its background color or paddings?

#7

Hi Alex, sorry, missed your last question.

You right, it seems that Google Info Window lacks the style for the top div. At the moment I don’t see a simple way of styling it other then injecting JavaScript and handling it from there. I will come up with some solution in the following couple of days and get back to you with code.

#8

Hi Igor, just want to follow up on this question, if you were able to find any solution?

#9

Hello, please check project attached.
Build and run a project and open “Map Style Test” screen, there is an example of Info Window with different background, border radius, hidden shadows etc.

I’ve added several classnames for Info Window DOM elements so you have more freedom on styling it.
However, styling posibilities are still very limited due to the way Google Maps are implemented - a lot of elements have absolute sizes computed at runtime. Not much we can do about that right now.

map_styling.zip (212.6K)