Banner image for DyNNamite DNN website page on Tutorial Videos

How to embed a responsive Google map to DNN

Transcription

In this tutorial we're going to show you how to add a google map to a page in DNN.

On our newly created page we are 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, if this is correct you're ready to go.

Now in the bottom right corner of your browser window you will 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.

 

Using the medium setting select the code which has been generated and copy it.

You can use “CTRL + A” then  “CTRL + C” to select all 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” and CMS admin functions will then appear.

Locate the module you want to change using the pencil icon press “Edit Content”.

The WYSIWYG editor will now appear.

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 press “CTRL + V” to paste in the code you copied earlier.


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2476.562116051034!2d-0.7646696838140835!3d51.63122997965577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48768a78f013d9a5%3A0x106b5a6492c8bcec!2sBBI+Brandboost!5e0!3m2!1sen!2suk!4v1551876605159" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

The BBI Brandboost site is a responsive site so we need to change the width from a fixed 600 pixels to one hundred percent.


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2476.562116051034!2d-0.7646696838140835!3d51.63122997965577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48768a78f013d9a5%3A0x106b5a6492c8bcec!2sBBI+Brandboost!5e0!3m2!1sen!2suk!4v1551876605159" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

You may need to do the same if you have a responsive website.

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.

Call the DyNNamite Team

If you have any questions about DyNNamite and our range of services, pick up the phone and give us a call on
+44 (0)1494 452600

Send us an email

dnn store

Our friendly team are only an email away. Send us an email to info@dynnamite.co.uk and we will respond as soon as humanly possible.