Location FInder With Google Map Listings

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.


This Kit & Code Are Made For XMod Pro


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
    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
    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.



Example DNN Google Map - Built With This Module Kit

Location Listing w/ Google Maps Integration For XMod Pro

  1. Tower Of London

    Lorem ipsum dolor sit amet, consectetur...

  2. BBC Offices

    Lorem ipsum dolor sit amet, consectetur...

  3. Richard Test

    Lorem ipsum dolor sit amet, consectetur...

  4. Location 4

    Lorem ipsum dolor sit amet, consectetur...

  5. Location 5

    Lorem ipsum dolor sit amet, consectetur...

  6. Location 8

    Lorem ipsum dolor sit amet, consectetur...

  7. Location 9

    Lorem ipsum dolor sit amet, consectetur...

  8. Location 6

    Lorem ipsum dolor sit amet, consectetur...

  9. Location 7

    Lorem ipsum dolor sit amet, consectetur...

Complete Location Listings

Listing Title Location Description Latitude Longitude
Tower Of London   123 Main Street Unit B
Miami, NA 33011 (GB)
Lorem ipsum dolor sit amet, consectetur... 51.508530 -0.076132
BBC Offices   123 Main Street
Doesn't Matter, MS 39213 (US)
Lorem ipsum dolor sit amet, consectetur... 51.515419 -0.141099
Richard Test   123 Main Street
St. Louis, MO 63102 (US)
Lorem ipsum dolor sit amet, consectetur... 34.828200 -98.579500
Location 4   123 Main Street Suite 123
Tallahassee, FL 32310 (US)
Lorem ipsum dolor sit amet, consectetur... 30.455000 -84.253300
Location 5   123 Main Street Suite 123
Atlanta, GA 30032 (US)
Lorem ipsum dolor sit amet, consectetur... 33.660646 -84.446425
Location 8   123 Main Street
Richmond, VA 23222 (US)
Lorem ipsum dolor sit amet, consectetur... 37.409574 -76.518608
Location 9   123 Main Street
Raleigh, NC 27511 (US)
Lorem ipsum dolor sit amet, consectetur... 35.649691 -78.833637
Location 6   123 Main Street Apt 1
Columbia, SC 29044 (US)
Lorem ipsum dolor sit amet, consectetur... 34.925679 -81.027031
Location 7   123 Main Street Suite 123
Nashville, TN (US)
Lorem ipsum dolor sit amet, consectetur... 36.171315 -86.770004

Read The Blog!

Ideas, tips and information on what we're developing for XMod Pro!

Moore Creative's XMod Pro Blog »

Modules On Snowcovered

See all of the modules on store.DotNetNuke.com, several are free DNN modules!

Custom DNN Development

Let us build custom DNN solutions for you! l

Need Support?

Want to see a demo? Need help setting up a module or XMod Pro custom control?
Contact Us