...

I'm in the process of migrating a clients site from Wordpress to Umbraco.  The client is a Yoga teacher and has classes in multiple venues. One particular venue is very tricky to drive to. As such it needs both a map and some detailed instructions. 

Now inserting a google map onto a page seems like something that should be relatively straightforward. In the end it was, although I haven't got quite as elegant a solution as I'd have liked. (I'll revisit it once the site is live - it needs to be up in a few days, and this part wasted a few hours).

Now when I googled this problem I found a few solutions but none were real starters for me. There are some packages you can install in Umbraco, but these require a gogle API key. There was a promising blog post that cost me quite a bit of time before realising that  they were writing for clients who had purchased their starter kit.

Some of the other solutions were discussing building it into the template or other ways that would not make it easy to change through the Content editor.

 

So the solution? Well first you need to get the url to the map.

To do this search google maps for your desired location. Then expand the menu  and click on the share or embed option as shown to the left. This gives you an option to Send a link  or Embed a Map.

Choose the latter and then choose the size of the map you want.

Select Copy HTML.

This will give you the html to embed in your webpage:

 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9944.25847762105!2d-2.5992335!3d51.45697!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6d46c7a40e830b6b!2sSt%20Michaels%20Parish%20Hall!5e0!3m2!1sen!2suk!4v1596763647725!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

 

 

The challenge then is to get that HTML to be rendered correctly in a content section.

If I 'Add Content' i get the following options:

Now since I want to embed a map, one would have thought that Embed would be the correct selection here, but unfortunately not. You get an unsupported type error.

This website and blog are also created with Umbraco, so just pasting the html in the Rich text editor doesn't work. 

 

However, if I insert a Rich text editor I can write the directions as required and at the place I want the map I can view source code and then paste in the map in the source

Surprisingly easy.

It's not ideal as it will require the end user to view source and replace the maps html should the venue change, but it's better than requiring a code change and doesn't require an API key.