We developed this XMod Pro Module Kit Solution for client projects where we need to show a series of Company Offices (Office or Location Map), or Sales Rep Location Finder to display a series of locations in Google Maps with have proximity search features.
 
Benefits & Features: This is a Module Kit Solution which means that there are several pages, XMod Pro Templates and XMod Pro Forms that work together for this fully customizable mapping solution. And remember, since it is built with XMod Pro code, you can easily edit and customize the module as needed!

• Easy To Use! Use this XMP Module Kit to display 6 offices in a map, or to display several thousand markers. Each location is a separate database record and is fully editable and available for further customization within XMP.
• Features Marker Clustering - At far zoom distances, when marker points can become a jumble of dots piled on top of each other, Clustering values allow you to set zoom levels and cluster amounts to allow a master/grouped single marker to show with the count of individuals beneath that group that will be seen at lower zoom in levels.
• Built-In Geocoding - As you add each new record, it uses Google to check address and fetch Latitude and Longitude coordinates. These are editable, and a backup service is provided to manually check/fetch alternate source coordinates as needed.
• Search Form - Search By Name, Search By Zip / Proximity - Example form allows users to search by zip code and return the nearest X records with distance in miles displayed.
• Google Maps API Version XYZ which allows for a high level of customized CSS control as desired to change the map colors and detail levels to your liking. The power is in your hands!
• Map Listing Records contain "map" link to jump to a zoomed-in level of the map, focused on the location, with the flag marker/details open. The "listing" link displays a customziable detail view for the location/record. This detail record is displayed on a separate page allowing you to create a search engine friendly marketing landing page for each office location or sales rep.
• The initial display centering point for the map and zoom level are auto calculated based on the records returned. The map will center based on the outer bounds of the map location points and will "zoom out" two levels to incorporate all into the map display window.

 
 

Installation: You have two options on how to install and begin using the module kit:

• Option 1. Install Manually
  With the provided .ZIP file of contents, you will find the necessary XMod Pro template and form code that you can copy and paste into new forms and templates that you create within the XMod Pro Control Panel. Additionally, if there are associated images and JavaScript files you will find these in the .ZIP as well.
• Option 2. Use the Kit Module Installer
  The kit module installer allows you to use the standard DotNetNuke module install process to install the XMod Pro forms and template files as well as create the example database table necessary.
  • To use the kit installer, simply install it in the same manner as a standard module.
  • then, place the module on a page
  • follow the instructions displayed on the module and click a button to complete installation
  • the completion of the installation process will remove the temporary kit installer module from the page and your DNN instance
  • you are now ready to specify the template, forms, etc within a module of XMod Pro like normal

Setup & Usage: Once installed, you must register the site domain name with Google and get your Google Maps API Key. The following setup and usage notes will help get you started:

• After Installation: Once you have the xmpGoogleMap template configured as the Template for and XMP Module, you will need to set the Google Maps API Key within the Template code. Use the link below to get the API Key for your domain
  https://developers.google.com/maps/documentation/javascript/get-api-key
  Just place the new API Key in the script tag (search for "src="//maps.googleapis.com/maps/api/js?key=").
• Review Template Code: That's the best part of XModPro! Read the comments and notes, learn from and tweak the code as needed to fit your project!
• Copy or Clean Up Code: This initial Template should be saved as a starter/example of the code setup. Make a copy of this template for use and be sure to clean up and remove any additional text, notes, instructions which you do not wish to display on a final usage of your Google Maps XMP Template.
• Troubleshooting JS or Skin-Related Issues: Often, Google Maps JavaScript and style/functions work immediately after setup. If not, please check for JavaScript alerts and conflicts. Often, switching to a default DNN Skin such as Gravity will help test whether the issue is a Skin-related conflict.
• Usage: The Add/Edit form allows Administrators to create new records. As they complete the address for a location, the form will attempt to geocode and return Latitude and Longitude from the Google service. If successful, it populates the two fields in the form. If not, please check for JS conflict. Also, an additional service is provided for locations which do not geolocate well through Google.