You will need an Image
element in your view to hold the image graphic returned from the Google API.
You will add it to the Map Fragment
file (which is displayed when you click on the Map tab).
You will also add the code to the SimpleForm
that you updated.
The new code should be placed after the last form element, as indicated by the red arrow.
In Map.fragment.xml
, add the following code after the last <Text>
element. Then click Save.
<core:Title text=" "/>
<Image src="{
parts: [
'Address/Building',
'Address/Street',
'Address/PostalCode',
'Address/City'
],
formatter: '.formatter.formatMapUrl'
}"
alt="{i18n>mapAltText}"
/>
You need to bind multiple attributes using parts:
to get the full address.
The address is composed of the Street Number, the Street Name, the Postal Code, and the City. The formatter:
call will transform these parts into the proper form for the API call.
The <core:Title>
element will add a responsive 2nd column.
On larger formats, like a desktop or iPad, you will see 2 columns. On smaller screens, like phones, you will see 1 column.
Your final code should look like the screenshot below.