Embedding Templated HTML/JavaScript Card In Post

Developer help
1

Hello,

I am trying to create a feature in which I can generically embed a Google Maps or OpenStreetMap using their APIs to draw overlays on the maps into some of my Ghost posts.

Currently, I can accomplish this by creating an HTML card and inserting javascript/html that does what I need it to do and manually changing a couple parameters inside the javascript to get it to show what I want. For example: lat/lon of locations to center on, zoom, where to draw markers or lines.

I’d prefer to make this a nicer, more generic experience. My first thought was to create a custom card type. However, it seems I would need to make changes to Ghost core in order to do that. My next thought was to modify the theme to load the map in a post when necessary. But then I would still need some way to be able specify the variables/parameters when creating the post, which doesn’t seem to be possible to do without modifying Ghost Core

I am new to Ghost, but an experienced javascript developer. How would you experienced folks accomplish this with Ghost? Is there a way I can create such a plugin without modifying Ghost Core?

1 Like
2

Hey @over_g,

How about using a post specific code injection for variables like lat, lon, zoom, etc? You can enter some JS variables in “Post settings > Code injection” section and modify your theme to use those variables to load the map. In my opinion, it might be better than using HTML cards or modifying the Ghost core.

1 Like
3

Hi @minimaluminium,

I think that may be the best option, although still not exceedingly great. Thanks for the idea.

Perhaps I’ll also look into to making a contribution to core, or at least adding this to the ideas list to see what other people think.