feat: Fallback to embedded iframe map (#3760)

Author: iamareebjamal

app/routes/public/index.js

@@ -2,6 +2,7 @@ import Route from '@ember/routing/route';
 import moment from 'moment';
 import { set } from '@ember/object';
 import { inject as service } from '@ember/service';
+import ENV from 'open-event-frontend/config/environment';
 
 export default Route.extend({
   headData: service(),
@@ -65,7 +66,9 @@ export default Route.extend({
         tickets : []
       }),
 
-      attendees: []
+      attendees: [],
+
+      mapConfig: ENV.APP.mapConfig
     };
   },
   afterModel(model) {

app/styles/pages/public-event.scss

@@ -167,6 +167,7 @@
   width: 100%;
 }
 
-.event-map > .g-map > .g-map-canvas {
+.event-map > .g-map > .g-map-canvas,
+.event-map > iframe.g-map {
   height: 300px;
 }

app/templates/components/public/event-map.hbs

@@ -1,13 +1,17 @@
 {{#if event.isMapShown}}
   <div class="eight wide column event-map">
     <h1>{{t 'Getting Here'}}</h1>
-    {{#g-map markersFitMode='live' lat=37.744 lng=-122.4367 address=event.locationName zoom=2 class='google-maps' as |context|}}
-      {{#g-map-address-marker context address=event.locationName as |markerContext|}}
-        {{#g-map-infowindow markerContext}}
-          {{event.locationName}}
-        {{/g-map-infowindow}}
-      {{/g-map-address-marker}}
-    {{/g-map}}
+    {{#if (eq mapConfig.display 'embed') }}
+      <iframe class="g-map" src="https://maps.google.com/maps?q={{event.locationName}}&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no"></iframe>
+    {{else}}
+      {{#g-map markersFitMode='live' lat=37.744 lng=-122.4367 address=event.locationName zoom=2 class='google-maps' as |context|}}
+        {{#g-map-address-marker context address=event.locationName as |markerContext|}}
+          {{#g-map-infowindow markerContext}}
+            {{event.locationName}}
+          {{/g-map-infowindow}}
+        {{/g-map-address-marker}}
+      {{/g-map}}
+    {{/if}}
   </div>
 {{/if}}
 <div class="{{if event.isMapShown 'eight' 'sixteen'}} wide column address">

app/templates/public/index.hbs

@@ -58,7 +58,7 @@
     <div class="ui hidden divider"></div>
   {{/if}}
   <div class="location" id="getting-here">
-    {{public/event-map event=model.event}}
+    {{public/event-map event=model.event mapConfig=model.mapConfig}}
   </div>
   <div class="ui hidden divider"></div>
   {{#if model.event.copyright}}

config/environment.js

@@ -115,6 +115,13 @@ module.exports = function(environment) {
     protocol  : 'https'
   };
 
+  ENV.APP.mapConfig = {};
+
+  // Use embed iframe map using address if MAP_DISPLAY is set or GOOGLE_API_KEY is not available or invalid
+  if (process.env.MAP_DISPLAY === 'embed' || !process.env.GOOGLE_API_KEY || !process.env.GOOGLE_API_KEY.startsWith('AIza')) {
+    ENV.APP.mapConfig.display = 'embed';
+  }
+
   ENV.sentry.hostname = getSentryServer(ENV.sentry.dsn, false);
   ENV.sentry.server = getSentryServer(ENV.sentry.dsn, true);
   if (process.env.CSPPermissive) {