Sunday, January 26, 2014

New Google maps integration with DNN 7(DotNetNuke)

Hi, In this blog I will explain How to insert new google maps into DNN 7.x (Dotnetnuke). Google has updated Google maps to new UI and functionality.

Here is the video to embed new google maps to DNN(DotNetNuke).


So will start with Google maps first.


Click on the Google applications on right top side of your browser. Open Google maps appplication.




You will be landed to New Google maps. Type your address or location in the search box. For instance i have added Madame Tussaud Newyork.


Once your location is targeted on google maps.Click on setting at the right bottom side of the map and select share and embed maps.

A modal popup will appear on the screen with Share link and Embed map option. By this you can have the link of the map to provide to any links if needed else we can choose to embed the map into your website or application.Also you can shorten the URL if needed .

 Since we need to embed google maps into DNN we will choose Embed maps option.Once you click on embed maps option you will have a smaller view of maps you have chosen i.e in my case Madame Tussauds New york with ratings,reviews,larger map option and get directions. You can also bookmark if needed.



OK once you have got map on Embed maps. Now you can choose the size of the map required based on your requirement.Google offers small,medium,large and custom size.

We can change the size of the maps by using custom size.Google maps also provides option to preview your custom size by clicking on preview option.A new window will be popped out for preview.


For now we will be using Medium as our map size. Will select medium size and copy the iframe provided.

Once iframe is copied will now login to our DNN (DotnetNuke).Add username and password and login to DNN.

Once DNN is logged in. To place our Google maps on our site we need to add a HTML module to our site. This can be added  by navigating to Modules > Add New Module > Selecting Common from the Drop down.






Once common option is selected from drop down options will be narrowed to HTML. Drag the  HTML module to your selected pane in my case i am adding module to Content Pane.

Now we have added HTML module to our Content pane. We need to edit the content in our HTML module. This can be done by clicking on pencil icon present on the HTML module. If you dont have pencil icon navigate to Edit page option on right top corner of the DNN control panel. After pencil icon is clicked click on edit content.

Once you select Edit Content. A modal popup will appear with all editing option. Initally the editr will be in Design mode change the mode to HTML. This can done just by clicking on HTML option just below the editor.

Once you selected HTML mode. Paste the iframe we copied from Google maps to the HTML editor in DNN. After pasting the iframe to DNN editor save the module by clicking on save button.

Thats it Google maps will be embeded on your DNN page in a following way.

Hope you liked my tutorial.Subscribe to  my Youtube channel to see more videos on DotnetNuke.

To know more about me visit www.nithinchandrasr.com