Backdrop CMS Instructional Videos, 10 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Simple Google Map: Backdrop CMS Module

Description

A demo of the Simple Google Map module for Backdrop CMS. This module simply creates a text format that allows you to display a text field containing an address into a Google Map.

https://backdropcms.org/project/simple_gmap

Let us know if this is helpful.

A

Hello, my name is tim erickson, I'm here with simplo by triplo once again to talk to you about another backdrop: cms module this time, we're talking about the simple google maps, module, there's a really simple module which uh just uh handles a really simple use case. We want to get a map onto our page, something like this. We need a single location. We don't need anything fancy. We don't need multiple locations in a single map. Okay, as I mentioned, the module is simple: google maps it's available on backdropcms.org.

A

This module is maintained by jen lampton, one of the original founders of backdrop cms, and also the maintainer of many many many uh really good modules. So big thanks to gen lampton.

A

As we said, this module is going to help us just put a simple uh map on the board.

A

uh If you find any bugs or have any suggestions or just want to give jen some feedback uh find the repo on github can find that here from the project page go to the github project page or on the from the page on backdropcms.org. You can get to the github page if you find any bugs or have any feedback, let's move along, and what I have here is a simple backdrop: cms site I have enabled installed and enabled the google simple map module. I haven't done anything else once installed.

A

There aren't any straight up settings for the module itself. The next thing you need to do is you need to it. Basically, it adds you a field formatter, um for when you display a field, we'll see what that looks like in a second, so I'm going to add a special content type and I'm going to go under structure content types and I'm going to add a content type we're going to call it a location for this particular project. We don't have anything in mind, except for this. One node use this used to create a map.

A

Look, I am going to uh do a hide path, display we're going to show our map in a block. We don't really need a page for this map. We don't want people accidentally stumbling across the page that we've created, so if we say hide path display. That means only an admin. Will ever actually be able to see the original piece of content?

A

Users won't, but we'll be able to take that content and put it into a block, I'm going to go ahead and hit save and add fields, and basically I need an address field, uh we'll just call it address. I'm gonna go ahead and it's a basically a text field. We don't even need the the address field module for this. uh We can even get away with a short, probably a short uh text field, I'm not going to change anything else.

A

Just address here in one line we could probably put a little better help text there if we think we need it, but this is good enough for now we're going to go ahead, uh we could delete the body field, we're not going to need it, but on the other hand it isn't hurting anything.

A

So once we've created this, then we need to go to the manage displays, and this is how do we want to display our content? The only place we're ever going to display this content is in a block and we don't even need the body field. We'll hide that in the block that we display we're going to show google map from one line address this uh text format mat is what was provided by uh the module and then we can. We have a bunch of additional configuration settings. We can do. I know from experience.

A

I don't know I'm going to do this for now there's a number of other settings. You can play with uh things like what type of map you want, the default to be how zoomed in you want to be on your specific location. uh Maybe we'll look at a couple of these later, but let's leave it like this.

A

For now I'm going to hit save now we need to go, create a node for this type of content, so under content we're creating a node and uh this uh the the the address we're going to use is for a farmers market down in. I believe it's in austin texas, so we'll call this farmer's market.

A

We don't need the body, I'm gonna quickly copy. The address that I prepared in advance and just drop that into this address field gonna go ahead and publish this boom there. It is okay, so we can see that the general concept is working.

A

uh One thing I can see that I did wrong was I made a vertical um instead of a horizontal map, so let's go fix that right. Now we're going to go into go back to the content, tent types, uh the location content type manage display, I'm going to go, manage display here there we go and we're going to make the ith width 800 and the height 400. Instead of vice versa. There we go save now the last thing we're going to do. We want this block.

A

Let's say we want this on the front page, so we're going to go to layouts we're going to go to the home page and we are going to put this down in the bottom region. We're going to say, add block and uh we're going to do an existing content type so or an existing content block.

A

So we're going to pick this existing and then we're going to start typing the the no the title of the the piece of content we want to display here, it's farmer's market and we're going to go ahead and display the full content. We know that the full content is just going to be the map. It's not going to be anything else, we're not going to put any title on this and we are not going to show the author date information. I think that's really it.

A

If we go ahead and hit save now we go to the home page and there we go. We have a big version of our map. It's not quite wide enough to fill the space.

A

So what we're going to do is we're going to go back to structure content types location go to manage display and this time we're going to configure this. Let's just make this like 2 000.. Basically, I'm going to make it much wider than I need it.

A

It should get limited by by the theme we're going to do a couple of other things. Let's just change this change this uh default to something much higher. It was 14, let's change it to like eight that should zoom out uh we'll change it to a satellite map or a terrain map. How about that- and we could do something like I don't know- include: oh, let's get rid of the information bubble and include the original address. Hit, save go to the home page boom.

A

So one thing you can see is we're zoomed out quite a bit further. I thought this was going to go away, but it didn't we'd have to play with that some more, but when we said show address what it did, is it added the address here down below the map? Obviously, so the map didn't get to be 2000 pixels wide it sort of maxed out at the maximum width of this as we narrow the screen. This map will narrow with the rest of the content. It's all mobile friendly.

A

You know here's the terrain map, maybe what we were doing is just making this available, but still by default, it's showing this anyways. I recommend you play with this some more, but basically this is a pretty simple map. All it does is give you that field. So all you need is a text field, and then you display that text field as a map, nothing more to it if you're liking our videos, please encourage us by commenting liking or subscribing.

A

You can find more backdrop, cms videos at teamtriplo on youtube, and please visit us at simplo.site to spin up your own site and to do some experimenting with any of these modules. Thank you very much.