Google Map

Elements
1

Is there a way I can put a Google map in my footer for directions? Custom HTML Component?

2

Unless I misunderstood then yes, it is easy.

Open the project in the second post in this thread - https://forums.realmacsoftware.com/t/google-maps-in-elements/46490. You should then see Google Map as a custom component along with all the other components.

Highlight the custom component in the example project and CMD-C then go your project, click somewhere and CMD-V. You should now have the Google Map custom component in your project. Drag a container in to the footer then drag Google Map into it. Click on the map and then open the tray and paste the code from Google. Watch the video in Dan’s post and you will get what I mean.

EDIT - The second video in the Scroll to Top thread you started shows how to copy and paste a custom component.

3

If you would like to put it in a wrapper so its easy to identify in the WISYWIG use this code snippet.

@if (edit)
    <div class="flex items-center bg-surface-100 p-5 pt-20 pb-20 flex-col h-full  w-[100%] justify-center text-5xl font-bold font-heading text-brand-400">
        Google Map
        <span class="text-lg font-normal font-body text-brand-400">Visible when Published or Previewed in Browser</span>
    </div>
@else
    <div class="google-map w-[100%] ">
    <!--Google Map Code START -->
##put Google embed code here##
    <!--Google Map Code END -->
    </div>
@endif
1 Like
4

Where do I find this?

5

The second post in this thread has the video - https://forums.realmacsoftware.com/t/google-maps-in-elements/46490

You will need the pause button.