DNN Tutorials - How to embed a responsive Google map to DNN

Tutorial video showing how to add a responsive Google map to a DNN website. We integrate an interactive Google map with a page on our website built using DNN7.

Transcript:

On our newly created page we have an HTML module which is displaying text content. We’re going to replace this with a dynamic Google Map.

Now open up another tab in your browser and go to Google Maps. In the search bar enter your company name and find your business location. A pin will then appear on the Map confirming your business location and if this is correct you’re ready to go.

In the bottom right corner of your browser window you’ll see a cog icon. Select this and press share or embed map. A pop-up window will appear with two tab options. You need to select embed map and using the medium setting select the code which has been generated and copy it. You can use control A and control C to select and copy.

Now go back to your website and the page you want the dynamic Google Map to be displayed on. Under the edit page button select edit this page. CMS admin functions will then appear.

Locate the module you want to change and using the pencil icon press edit content. Your WYSIWYG editor will now appear.
Now using the HTML mode to display the source code of the content in the module, highlight what is there and press the delete key on your keyboard.

Now scroll down and press save. Your Google Map will now display on your page.

Finally, hover over the edit page button and press close edit mode to view your dynamic Google Map ready with your reviews for your customers.