Skip to main content

Embedding Google Maps

One of Google Maps’ largest assets is it allows people to quickly find your business.

Users nowadays are infatuated with images, they appeal to the visual representation of your business. From images your business offers to photos shared by consumers, Google Maps curates a visual showcase of your business as a sneak peek of the products/services to what the storefront/interior looks like.

There are 2 ways to embed Google Maps on your website using OnePlugin.

Option 1 (Requires API key)#

Add Google Maps API Key in the Settings page. This will let you search for Places and select it.

ℹ️note

Information on how to setup Google Maps API key is available here

  1. Select Embed Google Maps option from the drop down.

Docusaurus

  1. On the textbox below the drop down, start typing the name of the place you want to add. OnePlugin Fields will show suggestions based on what you have entered.

Docusaurus

  1. Select the Place from the suggestions list.

Docusaurus

And that's it!!

Option 2#

You can embed Google Maps on your website without adding an API Key. This will restrict your options of having been able to search for Places. But it will still work.

  1. Open Google Maps and enter the name of the Place you want to add like this.

Docusaurus

  1. Copy the entire Place name, that's 'Vancouver Art Gallery, Hornby Street, Vancouver, BC, Canada' in this case.

  2. Select Embed Google Maps option from the drop down.

Docusaurus

  1. On the textbox below the drop down, Paste the name of the place you want to add as it is displayed in Google Maps which is 'Vancouver Art Gallery, Hornby Street, Vancouver, BC, Canada'.

  2. Click on the Set Address button

Docusaurus

And that's it!!

Displaying Google Maps#

Displaying Google Map with the selected location is very simple.

In your twig file, add

// entries.asset is the Craft CMS field name{{ entries.asset.render() }}

Rendering options#

The render() function accepts parameters which will be passed directly to the rendered output tag.

So for instance, the below code

// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','hello':'world'}) }}

will result in

<div class='row-flex col-sm-3' hello='world'><gmap/></div>

Having said that, there is an exception.

Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the width and height parameters along with an extra attribute called size, value of which should be set to true.

// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}

will result in

<div style='width:100px;height:100px;'><gmap/></div>

Available Twig Methods#

type() - Returns string 'map'.

// entries.asset is the Craft CMS field name{{ entries.asset.type() }}