Google Maps Geocoder style doesn't display on a page

• Type: Bug
• Status: Verified
• Resolution: Unresolved
• Affects Version/s: 7.0.0 DXP SP3, 7.0.X EE
• Fix Version/s: None
• Component/s: Geolocation, IP Geocoder
• Labels:
  • QA-V
  • ee-7.0.x-only
  • front-end
• Fix Priority: 3
• Browsers:
  Chrome (latest), Firefox 45 ESR, Firefox 52 ESR

Steps to reproduce:

1. Deploy the ip-geocoder osgi module from \modules\apps\ip-geocoder
2. Navigate to Liferay > Configuration > Site Settings > Advanced
3. Expand the Maps panel and select Google Maps (Note that I didn't add the Google Maps API Key (as it says it's Optional))
4. Navigate to Content > Web Content
5. Click on the header ellipsis and click on Structures
6. Click on the + button to add a new Structure
7. Click on the Geolocation icon to add a geolocation field; Save
8. Create a Template based on the Structure (adding the Geolocation field)
9. Create a WC article based on the Structure+Template combo
10. Navigate to/Create a Page
11. Add the article to the page

Expected result:
The Google Map will display.

Actual result:
The map doesn't display and the browser throws:

TypeError: A.Component is undefined

...pointing to:

var GoogleMapDialog = A.Component.create(

within map.js:

AUI.add(
	'liferay-map-google-maps',
	function(A) {
		var Lang = A.Lang;

		var MapBase = Liferay.MapBase;

		var CONTROLS_CONFIG_MAP = {};

		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.OVERVIEW] = 'overviewMapControl';
		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.PAN] = 'panControl';
		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.ROTATE] = 'rotateControl';
		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.SCALE] = 'scaleControl';
		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.STREETVIEW] = 'streetViewControl';
		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.TYPE] = 'mapTypeControl';
		CONTROLS_CONFIG_MAP[MapBase.CONTROLS.ZOOM] = 'zoomControl';

		var GoogleMapDialog = A.Component.create(
			{
				ATTRS: {
					map: {
						validator: Lang.isObject
					}
				},

				EXTENDS: A.Base,

				NAME: 'lfrmapdialoggoogle',

				prototype: {
					initializer: function() {
						var instance = this;

						instance._dialog = new google.maps.InfoWindow();
					},

					open: function(cfg) {
						var instance = this;

						instance._dialog.setOptions(cfg);

						instance._dialog.open(instance.get('map'), cfg.marker);
					}
				}
			}
		);

---

Note: When viewing the map in the article Edit mode, the Google Map is visible. Only when on a page, it doesn't display.