Picture of Google Maps Location Module Kit For XMod Pro

Google Maps Location Module Kit For XMod Pro

posted by Moore Creative - 02/28/2015

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 with Map Control and Map styles updated which allow 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="//").
  • 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.
Questions From DNNStore Users: " Hi, I'm interested in the Location Listing w/ Google Maps Module to integrate it on a Restaurant Listing Website I'm creating. Does the module allows to integrate custom search parameters like "Type of Cuisine"? Please help, I really need this.. : ) "
Are you familiar with custom development using XMod Pro? If so, then you're able to build/do almost anything you can imagine in DNN. So the quick answer is YES, you could easily do that type of thing.

The module kit itself installs/sets up a demo set of listings/addresses so that you can see how it works by default. You can then take it an modify it to do many different things.

The search form that we have in the kit will do zip code proximity search so that the user can type in a zip code and set "within X miles" with choices like 10 mi, 50 mi, etc in the drop down. The search results then display ordered by proximity with lowest miles first out to farthest within that range.

You can easily customize it to also have other search parameters like if you wanted to add a Category field to the database/form/templates then you can have that in the search.

Depending on what you need to do, we may have code for something similar that we can share or could easily customize and show you how to work with it in a quick hour or two project.
I am working on an event solution whereby users can add Venues. These of course have addresses.

To date the form is totally manual input. I am considering using SmartyStreets as a solution to look up the address and autocomplete the form. But their geocoding is not nearly as good as Google Maps and of course provides no mapping capability.

Does this kit provide similar (lookup/form completion) functionality or is there reason to think that the two tools can be integrated in a single solution?

I like the way that you're thinking about the project! one or multiple variations of what you suggested might work out well. For example, yes you can use one part to modify/augment the other... we use XMod Pro all the time to help extend or replace certain parts of other modules that we want to adjust.

In this case, though, if you're thinking about having events that need calendar locations, I might recommend using one of our other module kits to get a calendar display of your event data and the tying it all together in this location module kit... remember, it's all XMod Pro code and is intended to be reworked, recoded and, in this case, blended togetehr with other things.

here's our calendar

and some examples in use

and then you can combine with the google maps / location forms and/or other parts of the map display too

(and we have other variations on the map work too...

anyhow, YES, the form attempts to auto look up and geocode by the address entered. when typing, as soon as you leave the zip code field, it tries to geocode and if successful it will auto populate the lat/long field.

This doesn't work for all addresses, though, so there is a link and text on the side of the form that tells a user how to look it up and get the lat/long from a different geocoding service and then copy/paste.

If you think it's a good direction too, I'd say get the module kits and start working on it and if it doesn't work out for you, I'll be glad to pitch in and help or advise or assist develop, and/or refund if it's not the tool for you on this project.

Good luck with it!

- Ryan