Menu

Blog

Read about our DNN modules and themes

Adding Google maps to articles in EasyDNNnews

EasyDNNnews comes with in-built support for displaying Google Maps and a Google map editor enabling you to create your own maps and add map points. Maps created in this way will be displayed below the article's text.

1) Adding Google Maps API key:

To enable using Google maps within an article, it is necessary to add Google Maps API key to the module's settings.

  • Ask user to share location when writing article
    If this option is switched on, the user will be asked about the exact Geolocation when adding maps. The browser will require from the user to authorize the sharing of his or her Geolocation.

Finish this process by saving the settings.

2) Adding Google maps to articles

Image

Upon adding your Google Maps API key and saving the settings, in the add/edit form of the articles there will appear a new panel for adding and managing Google maps.

In the add/edit form in the Main article map panel click on the button Add Map. This will open the Google map editor. If the option "Ask user to share location when writing article" is switched on and the user has authorized the browser to receive his or her location, the map will be positioned at the user's current geolocation. This geolocation doesn't necessarily correspond with the user's actual location.

If you wish to position your point at a different location from the automatically provided one, type the location's name in the field Search for location and choose between the locations you will be offered.

Setting up map options

To the right of the map there are General settings. There you can set up certain options related to the map.

  • Map type
    Choose between several map types.
  • Latitude Longitude
  • Zoom
    Here you can set up the extent of the map's zoom. Instead of entering specific numbers, you can set up the zoom with your mouse's scroll wheel above the map itself.
  • Width
    Enter the desired width of the map within an article in pixels.
  • Height
    Enter the desired height of the map within an article in pixels.
  • Enable scroll wheel zoom
    If this option is switched on, the map within an article can be zoomed with your mouse's scroll wheel.

3) Adding markers to a map

Image

One or more markers can be added to a map. Click on the Add marker button. The marker will be shown on the map. You can hold the marker with your mouse and place it on the desired location. In the Title field add the marker's name, and you can optionally add its HTML description as well. These values will be shown on the map. Click on the Confirm button to add the marker to the map.

Multiple markers can be added in the same way. Markers can later be edited or deleted.

Finally, when the map has been edited according to your wishes, it is necessary to click on Add as article map. This will enable your added map to be displayed in the article. In the Main article map panel there will appear the message: "Main article map is set".

The map can be removed by clicking on the Remove button in the Main article map panel.

 

EasyDNNsolutions
Contact author

EasyDNNsolutions Other posts by EasyDNNsolutions

EasyDNNsolutions

Contact author

x

Subscribe to our Blog