Responsiveness CGGooglemaps 2.4.7

[janvl]

Is it possible to bring responsiveness to CGGooglemaps.
I have changed the standard template to:

<div id="cggm_map_display_{$mapinstance}" style="width: 94%; height: 500px;">{* the map will go here *}</div>

But although it is saved and shows in the sourcecode on the site, I still get a width that is a fixed amount of 800 pixel.

For now I have put the width to 400 px.

Kind regards,
Jan

[JohnnyB]

Why not add a class or ID to it instead of inline CSS?

Add a class and then set the width:100% and max-width:100% and height:auto

Then, in a responsive situation, the container will expand no more than 100% of the container that it is inside of and shrink to fit the container as the viewport decreases in size.

[janvl]

Thank you JohnnyB

but this is the template that is part of CGGooglemaps.
So I first tried to change it with the inline CSS.

That however does not do what inline-css is supposed to do.
The latest values for width and height are stored somewhere, even if you leave them blank and save, refreshing the page gives you the last pixel values for width and height. Mediaqueries have no effect.

That is why I would like to know if it is possible to use the module with a responsive design, and how.
In the meantime I tried module "Googlemaps" that has the same problem, not accepting percentages but only pixel values.

Kind regards,
Jan

[JohnnyB]

Perhaps you are not modifying the correct template. Be sure you are editing the template for the map you are trying to load and not the default template.

Responsiveness is all Frontend. So, that is the way to make it responsive. Using frontend code (CSS or JS) to make it work for you. The module itself (backend programming) cannot be made to be responsive.

Again, I would set a class name a and the rules I suggested. If it is not helping, there is a CSS conflict that is overriding your new rules. Use the browser's Inspector (Inspect Element) and see what is going on.

[Dr.CSS]

How are you testing the responsiveness of it, making the browser narrow, looking at it with a phone/tablet/etc..?

Something need to be refreshed when changing browser size...

[janvl]

I made a second map and use display none to show the right one.

Kind regards,
Jan

[wmdvanzyl]

What does that mean Jan? I want to know if this is an issue or if it is resolved?

[janvl]

Ok

it is not a nice solution but it works.

I made 2 maps 1 with 750 x 500 px, the other with 300 x 500 px
in both the same 3 markers.

In the page i have 2 divs, one containing the wide map and one containing the small map, in the media queries I use

display:none; for the small map if I have a wider screen
display:block; for the wide map if I have a wider screen

display:block; for the small map if I have a small screen
display:none; for the wide map if I have a small screen

Kind regards,
Jan