CBX Map for Google Map & OpenStreetMap

▶️ Watch the Video

Gutenberg, Elementor & Widget Support

CBX Map integrates with popular WordPress content-building tools.

• Gutenberg Block — Add maps directly from the WordPress block editor.
• Elementor — Add maps using an Elementor widget.
• Classic Widget — Add maps through the traditional WordPress widget.
• WPBakery Page Builder — Add maps using a WPBakery element.

Shortcode

The simplest way to display a saved map is:

[cbxgooglemap id="123"]

Replace 123 with the ID of a map created using the CBX Maps custom post type.

Display a Saved Map

Once you create a map from the WordPress admin, copy its shortcode and place it anywhere that supports WordPress shortcodes.

Example:

[cbxgooglemap id="123"]

Only the id attribute is required when displaying a saved map.

Display a Map Without a Saved Map

You can also create a map directly from shortcode attributes without creating a CBX Map custom post.

Example:

[cbxgooglemap lat="23.8103" lng="90.4125"]<h3>Shortcode Attributes</h3>

* id — Saved CBX Map post ID. Optional. * maptype — Map type. Default: roadmap . Available values: roadmap , satellite , hybrid , terrain . * width — Map width. Numeric values are treated as pixels. Percentage values such as 100% are also supported. * height — Map height in pixels. * zoom — Initial map zoom level. Default: 8 . * lat — Latitude of the map location. Required when using a map without a saved map post. * lng — Longitude of the map location. Required when using a map without a saved map post. * heading — Title displayed in the information window. * website — Website URL linked from the place name in the information window. Leave empty to disable the link. * address — Content displayed inside the information window. * scrollwheel — Enable or disable mouse-wheel zooming. 1 = enabled, 0 = disabled. * showinfo — Show or hide the information window. 1 = enabled, 0 = disabled. * infow_open — Control whether the information window is initially open. 1 = open, 0 = closed. * mapicon — Custom marker icon URL. Leave empty to use the default marker.

Example:

[cbxgooglemap lat="23.8103" lng="90.4125" zoom="12" maptype="roadmap" width="100%" height="400"]

For complete shortcode documentation and Pro features, see the CBX Map documentation .

CBX Map Pro

Get CBX Map Pro

Upgrade to CBX Map Pro to add advanced mapping and location features.

Pro Features

• Distance search shortcode
• Distance-based map and list display
• Display multiple map locations on a single map
• Use saved map posts as multiple markers
• Make individual maps public or private
• Map categories
• Additional shortcode options and advanced functionality

▶️ Watch the Pro Video

For complete Pro documentation and shortcode options, visit the CBX Map documentation .

Automatic Installation

1. 01From your WordPress dashboard, go to Plugins → Add New .
2. 02Search for CBX Map for Google Map & OpenStreetMap .
3. 03Install the plugin.
4. 04Activate the plugin.
5. 05Go to the CBX Map settings and configure your preferred map provider.
6. 06Create a map or use the [cbxgooglemap] shortcode to display a map.

Manual Installation

1. 07Download the plugin.
2. 08Upload the cbxgooglemap folder to /wp-content/plugins/ .
3. 09Activate the plugin from the Plugins menu in WordPress.
4. 10Open the CBX Map settings.
5. 11Configure your map provider and settings.
6. 12Create a map or add the shortcode to your desired page, post, widget, or supported page builder.

Google Maps API

If you use Google Maps , configure the required Google Maps API credentials according to Google’s current API requirements.

If you use OpenStreetMap , a Google Maps API key is not required.

Support

Need help with CBX Map?

• Free Support
• Documentation
• Pro Support
• Contact Codeboxr