Location Listing w/ Google Maps Integration For XMod Pro
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.
Made For XMod Pro
This Kit / Code works in XMod Pro and is a collection of Forms, Templates and Feeds that together create a solution or module for DNN. This code will not work without XMod Pro 3+ installed in your DNN instance. If you do not already have a licensed copy of XMod Pro, go get one!
Get XMod Pro now from The DotNetNuke Store
Notes & Instructions
Remember, we are continuing to update and enhance the control with new features from your requests and from our ongoing use of the control in client projects. Be sure to let us know your suggestions and requests!
The Module Kit installer will setup example XMod Pro templates, forms and XMP modules as a starter example for you to work from.
Installation: You have two options on how to install and begin using the module kit:
- Option 1. Install Manually
- 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
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.
- 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.