DotNetNuke Google Map Module User Guide

 DotNetNuke Google Map Module User Guide

pdf iconDownload user guide for this module in PDF format
 

Overview
You and your visitors will never get lost using this DNN Google maps solution. Apart from the set of regular options the module offers a great variety of additional customization settings with the ability to insert marker graphics of your choice, display the list of added locations among the other ones.

Managing Map Settings
After installing the module on the page click on the “Map Settings” link to tune the map module the way you need to. There are 2 types of settings available on the page: Map Settings and Locations. Let’s review both of them starting off with the Map Settings.

a)   

Map Settings give users an opportunity to adjust the map looks with an array of options:

  • Google API Key. For more info on the Google API Key please turn to the appropriate Google page.
  • Width and Height. Use this option to define the dimension of the map on the page.
  • The Zoom option allows setting the default zoom parameter. The default zoom parameter is 10 which means meter sits at a 10 zoom mark. You can set any zoom parameter from 1 to 20.

google maps image1

  • Map Type. Choose if you’d like to see a regular map, the way the map looks like from the satellite or have a mixed “hybrid” looking map combining the looks of the first and second modes.
  • The next option allows displaying or hiding the zoom scale.
    The following 5 options – Show Search, Show Scale, Disable Map Type, Disable Dragging, Disable Click Zoom – are checkboxes with the help of which you can either switch on or off the functions we have just enumerated and display or hide them on the map.
  • After the editing process is completed, click “Update” to save your settings.

b)   

The Location tab allows setting the markers on your map module.
The marker usually looks like this google maps image2  by default, but the module allows using custom markers pictures. Let’s check all the options the Location tab has to offer.
All the settings you’ll set on this page will be displayed in the pop-up “cloud” window that appears once you click on the map marker.

  • The first 6 fields are the general ones where you’ll be offered to input your address, phone number etc.
  • Latitude and Longitude fields.  These you don’t require to fill in on your own. To fill in these parameters automatically simply write in the destination you want to add to the map in the search field in the Google Map below. The map will show the destination you put in. After that click on the marker with the destination you were searching for and latitude and longitude values will filled in the appropriate fields by their own accord.
  • Finally Image and Marker Images will allow you to add custom graphics inside the marker pop up box and custom marker image that will substitute the default marker image respectively.

google maps image3

  • Click Add to display the location you’ve just added on the map.
  • Right next to the Location panel you’ll have all the added locations in a table. You’ll be able to choose which location to display by default by clicking on the required "Center" radio button, edit or remove the required position.

google maps image4

All the editing is done and you now can return to the page where your map module is located to appreciate the results.
The locations you have added are now displayed next to the map on the right.

google maps image5

Click any location from the list and the map will display the location you clicked on.
Don’t forget that on the map you can click on the location marker to display the “cloud” window with the information of the place you have filled in on the Location page.