Embedding Templated HTML/JavaScript Card In Post

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