Add Google Maps to your Applications
Some common purposes of the Google Maps are:
- Map a list of available products and where your customer base may find them
- Visualize the location of your nationwide fleet
- Embed closed order addresses to determine shipping logistics
- Map a list of current clients to see what geographical areas need more of your sales attention
- Create a graphical representation of your partners’ locations for easy customer search
Please follow the steps below to integrate a Google Map inside of your web application:
The following steps are only needed to be done once:
- You will need to sign in using a Google account, and then activate Map API V2. Finally, click the API Access link to be brough to a screen that looks similar to this:
- Copy your key, located under “Key for Browser Apps (with Referrers)”.
- Click the Admin button, then click Edit Data Dictionary Files. Lastly, click Servlet Properties.
- Click the App Properties icon from the toolbar, and then navigate to the Others tab.
- Paste your API key into the google-map-key box.
- Click “Save”.
Note: While you can reuse the same Key within multiple Data Dictionaries, you will still need to repeat Steps 4 through 7 for each Data Dictionary you wish to use Google Maps.
Note: Before applying a Google Map to your application, please note that there are two issues for your organization to consider.
- First, your organization will need to register for a Google Maps Key directly with Google.
- Second, your organization might need to license the Google Maps service directly from Google, depending on your application. Please see the Google Maps Terms of Service for more information.
Per Each Application
The following steps need to occur each time you wish to generate a map:
- The Google Maps integration is designed to work on each template. With this in mind, after you have generated the template of your choosing, please open m-Painter.
- Click the Globe within the m-Painter toolbar (shown below highlighted with a red outline).
- A helpful pop-up will appear that will allow you to customize your map. Options include:
- Ability to control the Width and the Height of your map (in pixels).
- Control the Default zoom level (The higher the number, the more zoomed in you are by default).
- The ability to control default centering (By default, maps will center upon the first address, however you can center by a Latitude/Longitude line)
- The ability to control the marker type (By default the marker will be the red Google flag, however, you can conditionally use different images by entering the path to an image within a calculation. In this case, you would select the given calculation from the Customer marker image dropdown. Lastly, you could specify “Other” from the drop-down and hard code a static path to an existing image.
- Show marker info allows your end user to control how they see additional “balloon” information. By default, the option is on click. However, changing the value to “Mouseover” will activate the balloon window on mouse contact.
- Map Address — This option is perhaps the most important, as it controls what is mapped by Google. You can specify an entire address, a city, a zip code, or even just a state. So long as it is a valid location, it can be mapped! Select the necessary fields from the “Select Field” drop-down. Then press the “Add” button. Note: Be sure to add the necessary delimiters, such as commas where necessary.
- Marker Text Info — This option controls what data is seen in a balloon pop-up when a user clicks on a marker within the map. As a developer, it is your decision what data, if any, should appear in the balloon pop-up.
- When completed, press “OK” and Save your application.
- When your application executes, you will see your Data markers begin to fill the screen as a progress bar within the map informs you of how many points have been populated:
- Once completed, your map will look something like this: