{"id":1628,"date":"2026-07-28T22:33:45","date_gmt":"2026-07-28T22:33:45","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/maps\/"},"modified":"2026-08-20T18:42:05","modified_gmt":"2026-08-20T18:42:05","slug":"maps","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/maps\/","title":{"rendered":"Maps"},"content":{"rendered":"
\n\n
\n\n
\n

Left-Aligned Google Map<\/h3>\n\n
<\/div>\n\n\n

Embedding an interactive Google Map alongside your content helps visitors quickly locate your offices, venues, or specific points of interest. The left-aligned layout keeps the map clearly visible while allowing your descriptive text to wrap naturally around it, maintaining a clean and very readable page structure throughout your entire site.<\/p>\n\n\n\n

Canvas makes it straightforward to configure map zoom levels, center coordinates, and custom marker pins directly through simple HTML data attributes. Whether you are showcasing a single city or an entire network of global branches, this approach provides a seamless integration without requiring complex JavaScript setup, additional libraries, or backend configuration.<\/p>\n\n<\/div>\n\n\n\n

\n

Right-Aligned Google Map<\/h3>\n\n
<\/div>\n\n\n

A right-aligned map creates an effective visual anchor at the start of your content block. Readers can immediately orient themselves geographically while the descriptive text provides additional context about the location. This layout is ideal for office directories, event venues, or any page where spatial awareness enhances the user experience.<\/p>\n\n\n\n

Configuring the data-address attribute with any valid street address or city name automatically centers the map on that location. The responsive design ensures the inline map scales correctly across all screen sizes, from mobile phones to widescreen displays, giving every visitor a consistently polished browsing experience with accurate geographic context.<\/p>\n\n<\/div>\n\n<\/div>\n\n\n

<\/div>\n\n

Full Width Google Map with Multiple Markers<\/h3>\n\n
<\/div>\n\n\n

Multiple custom markers let you highlight several key locations on a single map view, making it easy for visitors to compare sites at a glance. Use the data-markers attribute to define each pin with its own address and popup HTML label, and supply a data-icon property to swap in your own branded icon instead of the default Google marker pin.<\/p>\n\n\n

<\/div>\n<\/div>\n\n
\n\n\n

100% Full Width Google Map<\/h3>\n<\/div>\n\n\n\n
<\/div>
\n\n\n\n

A full-bleed map spanning the entire page width delivers a bold, immersive look that works particularly well on landing pages and contact sections. Simply omit the container wrapper and allow the map element to stretch edge-to-edge. Combine it with the data-zoom attribute to control how closely the initial view focuses on your selected region or city.<\/p>\n\n<\/div>\n\n

\n
\n

Explore more Elements<\/h4>\n<\/div>\n\n
<\/i>
Shop<\/h5><\/a><\/div>
<\/i>
Blog<\/h5><\/a><\/div>
<\/i>
Events<\/h5><\/a><\/div>
<\/i>
Contact Forms<\/h5><\/a><\/div>
<\/i>
Modal onLoad<\/h5><\/a><\/div>
<\/i>
Side Panel<\/h5><\/a><\/div>
<\/i>
Animations<\/h5><\/a><\/div>
<\/i>
Buttons<\/h5><\/a><\/div>
<\/i>
Carousel<\/h5><\/a><\/div>
<\/i>
Clients<\/h5><\/a><\/div>
<\/i>
Columns<\/h5><\/a><\/div>
<\/i>
Counters<\/h5><\/a><\/div>
<\/i>
Read MoreElement<\/span><\/h5><\/a><\/div>
<\/i>
Dividers<\/h5><\/a><\/div>
<\/i>
Icon Boxes<\/h5><\/a><\/div>
<\/i>
Gallery<\/h5><\/a><\/div>
<\/i>
Headings<\/h5><\/a><\/div>
<\/i>
Icon Lists<\/h5><\/a><\/div>
<\/i>
Gradients<\/h5><\/a><\/div>
<\/i>
Lightbox<\/h5><\/a><\/div>
<\/i>
Overlays<\/h5><\/a><\/div>
<\/i>
File Uploads<\/h5><\/a><\/div>
<\/i>
Lists & Cards<\/h5><\/a><\/div>
<\/i>
Maps<\/h5><\/a><\/div>
<\/i>
Media Embeds<\/h5><\/a><\/div>
<\/i>
Modal Boxes<\/h5><\/a><\/div>
<\/i>
Notifications<\/h5><\/a><\/div>
<\/i>
Navigations<\/h5><\/a><\/div>
<\/i>
Pagination<\/h5><\/a><\/div>
<\/i>
Progress Bars<\/h5><\/a><\/div>
<\/i>
Shape Dividers<\/h5><\/a><\/div>
<\/i>
Pricing<\/h5><\/a><\/div>
<\/i>
Process Steps<\/h5><\/a><\/div>
<\/i>
Promo Boxes<\/h5><\/a><\/div>
<\/i>
Blockquotes<\/h5><\/a><\/div>
<\/i>
Responsive<\/h5><\/a><\/div>
<\/i>
Sections<\/h5><\/a><\/div>
<\/i>
Social Icons<\/h5><\/a><\/div>
<\/i>
Hover Animations<\/h5><\/a><\/div>
<\/i>
Alerts<\/h5><\/a><\/div>
<\/i>
Styled Icons<\/h5><\/a><\/div>
<\/i>
Tables<\/h5><\/a><\/div>
<\/i>
Tabs<\/h5><\/a><\/div>
<\/i>
Testimonials<\/h5><\/a><\/div>
<\/i>
Thumbnails<\/h5><\/a><\/div>
<\/i>
Toggles<\/h5><\/a><\/div>
<\/i>
Lazy Loading<\/h5><\/a><\/div>
<\/i>
Flip Cards<\/h5><\/a><\/div>
<\/i>
Cascading Images<\/h5><\/a><\/div>
<\/i>
Before\/After<\/h5><\/a><\/div>
<\/i>
Video Facade<\/h5><\/a><\/div>
<\/i>
GDPR<\/h5><\/a><\/div>
<\/i>
Cart Quantity<\/h5><\/a><\/div>
<\/i>
Circle Stack<\/h5><\/a><\/div>
<\/i>
Image Sliders<\/h5><\/a><\/div>
<\/i>
Ticker<\/h5><\/a><\/div>
<\/i>
AJAX Button<\/h5><\/a><\/div>
<\/i>
Conditional<\/h5><\/a><\/div>
<\/i>
Code Highlighter<\/h5><\/a><\/div>
<\/i>
Custom Cursor<\/h5><\/a><\/div>
<\/i>
Hover Parallax<\/h5><\/a><\/div>
<\/i>
Mode Switcher<\/h5><\/a><\/div>
<\/i>
Image Hotspots<\/h5><\/a><\/div>
<\/i>
Filters<\/h5><\/a><\/div>