Google Maps + Magnolia CMS

How to use Magnolia and Google Maps together

What Google Maps offers

Google Maps offers several embedding solutions that allow users to integrate maps directly into their websites or applications seamlessly. One option is the Google Maps Embed API, which enables developers to embed interactive maps into web pages with just a few lines of code. This API allows customization of the map's appearance, including setting the zoom level, center point, and map type (such as satellite view or street view). Additionally, developers can specify markers, info windows, and overlays to provide additional context or information.

Another embedding solution offered by Google Maps is the Google Maps JavaScript API. This API provides more advanced customization options and greater control over the map's behavior and functionality. Developers can create dynamic maps with interactive features such as draggable markers, custom overlays, and directions between multiple locations. The JavaScript API also allows integration with other Google services, such as Places API for location-based search and Geocoding API for converting addresses into geographic coordinates.

Furthermore, Google Maps offers an iframe embedding option, allowing users to embed a static or interactive map into their website using a simple HTML iframe tag. This method is straightforward and requires minimal coding, making it suitable for users who want to quickly add a map to their site without extensive development work.

Overall, Google Maps provides flexible embedding solutions catering to different levels of customization and integration requirements, making it easy for developers and website owners to incorporate maps into their online platforms effectively.

Easy peasy, out of the box

Embed with iFrame

The easiest way to add a Google Maps to your website is by adding the iFrame embed code to a HTML Component. If you don't have an HTML component available, please ask your implementation administrator. They probably removed permissions.

  1. Open the Google Maps Website

  2. Navigate to the directions, map, or Street View image you wish to embed.

  3. Click on the Menu Icon (Burger Menu) at the top left corner

  4. Click Share or embed map.

  5. Click Embed a map.

  6. Copy the html iframe code in the input box.

  7. Add it inside a html component on your website.