Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Styled gMaps

Beautify your contact pages with one of the most customizable yet lightweight solutions available.
This extension is a gateway to the Google Maps service that allows you to have maps that fit your design colors.

Some features:

- Responsive.
- Multi-addresses supported.
- Every element on the map has its own customization.
- Map controls configuration.
- Optional: Multiple custom images for the markers.
- Tooltips and info windows for the markers.
- Multi-instance.
- Highly-optimized markup output code.
- Maximum compatibility.

...and more!

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version

- Infowindow: Improved caption and content alignment.

* New in version

- Resolved a resize/relocation sporadic issue on older browsers and/or slower platforms due to changes in the Google's API.
- New five built-in styles.
- Minor code tweaks.

* New in version 1.0.2

- Predefined styles; 15 built-in elegant styles included to make the instance even easier and quicker to setup.
- Minor markup tweaks.

* New in version

- Handling gestures modes; improves navigability on mobiles (prevents collisions when dragging the page and/or the map).
- Clickable icons option; specifies if map icons are clickable or not (usually a POI is a clickable icon).

* New in version 1.0.1

- Addresses: Resolved a bad parameter conformation in case of using the default address marker.
- Infowindow: Improved optional image styling.
- Infowindow: Improved optional 'read more' button styling.
- Infowindow: Improved optional framework styling.

* New in version

- Improved code to avoid 'may be blocked code by browser on poor network connectivity' message on Chrome 52+.
- Improved [missing] API key handling on testing environment.

* New in version

- Optionally, an infowindow can have a custom subtle framework to differentiate the own addresses from the
  other map information elements.
- API key supported for professional productions, avoiding the "missing key" console warning (not relevant during
  development stages).
- Standard or secured connection modes.

* New in version

- Optionally, an infowindow can automatically be opened once the map has been loaded.

* New in version

- Address markers can also have links (besides the infowindow).
- Improved target handling.
- Improved startup on advanced scenarios.
- Improved compatibility with [rz] Adaptive Framework, [rz] Stretch Layers and [rz] Block Framework.

* New in version

- Optional size definition for the custom image in markers to allow a better implementation on Retina-based devices.
- Optional size definition for the infowindow image to allow a better implementation on Retina-based devices.

* New in version

- Additional workaround for refresh/startup issues on slower devices and heavy/advanced pages.
- Optionally, also an external styles editor or a code generator can be used (like or;
  maybe others as well) and just copy-paste the resulting code within the extension (see 'Elements: resource' category).

* New in version

- Fixed an alignment issue in different breakpoints (when using an instance within a layer).
- Improved backward support.

* New in version

- Horizontal and vertical offset for the main/first address centering.
- New default values based on the new style of the Google Maps elements.

* New in version

- Filter control feature filters different areas of a multi-addresses map.
- Common addresses for different areas are supported and managed by the filter control.
- Highly customizable to fit the design scheme.
- Improved infowindow.

How to use?

1. Drag and drop a layer and optionally make it resizable (via relative sizes or breakpoints).
2. Drag and drop the [rz] Styled gMaps within that layer.
3. Open the extension properties dialog and setup the colors you want for the desired map elements.
4. Optionally, select the controls you want them visible on the map and setup their position and
5. Enter the address(es) you need and, optionally, the custom images for each address.
6. Preview or publish.

How to make a "full-screen" map?

1. Drag and drop the extension in the workspace.
2. Set it up as usual.
3. Preview or publish.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with