Newbie one: How to insert the google map code into the form template

Support Plugins
1

Hello,

I’ve started using grav (with gantry5) and I’m trying to show a map in the contact form page.

I have a page folder “3.Contact” with the form file form.md in it as shown in the documentation: https://learn.getgrav.org/forms/forms/example-form

Then I’ve installed, enabled and configured the google map plugin and I was given this code to view the map:

[google-maps width='100%' lat=44.540 lng=-78.546 zoom=13 scrollwheel=true panControl=true iconurl='/absolute/path/to/marker/icon.png']
***My Place***
This is my place
[/google-maps]

If I put this on the form.md file, the maps shows but the form is not rendered. Where I must put the code?

Thanks in advance.

2

hi @XaRz

Did you get your Google Api key ?

1 Like
3

Yes.
I finally used a gantry 5 particle to display It…but i want to do It with the grav plugin.

4

I suggest you search the web for “grav google maps”. It will show you a couple of relevant Grav plugins and even some Grav Forum posts about that topic.

1 Like
5

Navigate to plugins/google-maps/google-maps.yaml and enter your Google Maps API and save the file.

Interesting though, you have to set up billing to use the Google Maps API. They they recommend restricting usage by creating a user for your API.

Not sure it’s worth all of that to embed a map :wink:

6

Hi,
I have a related problem.

How to display a map in the footer for each page. Footer file is in …/partials/footer.html.twig, but embedding markdown in …html.twig displays only markdown:(

Please see below screen:

debugger%20map
debugger map.png884×366 116 KB

7

If I understand right, you did embed the markdown/shortcode for the google maps shortcode in your footer.html.twig ?
if so, that will not work, as twig does not process/interpret markdown shortcodes.
try to use the correct syntax to embed shortcodes in twig, see for example this hint
on stackoverflow

8

So, basically I should create a new page (.md file) where I put markdown (markdown embeded in .md shows a map). Then I should embed content of this page in /partials/footer/html.twig, right?

9

Perhaps not specifically what you’re looking for I highly encourage you to abandon Google Maps in favor of OSM. The benefit is that people can own the data, not Goolag.

Here’re the API docs: https://wiki.openstreetmap.org/wiki/API

Do the right thing.

10

No, just the other way round :grinning: - your footer is a template which is shown on all pages that incorporate that template, so will have to insert the maps shortcode in a way that can be interpreted by twig.
and, as already mentioned by next poster, you could consider using OSM instead of google maps, for various reasons.
there is a nice grav plugin for OSM: Map Marker Leaflet

11

Hello guys!
Does anyone has implemented the Google Maps shortcode in html.twig?
Any example would be appreciated

12

@01K, The readme of the Google Maps plugin provides an example that works…

You already know how to embed a shortcode in Twig for Owl Carousel plugin and this shortcode is no different.

{{ "[google-maps lat=44.540 lng=-78.546][/google-maps]" | shortcodes }}

The only difference is that you need a valid API to make it work without errors…

What have you tried and failed to work?

1 Like
13

That’s awesome! Thank you!