Google Maps embed on LocationPage

bakerydemo/locations/models.py

@@ -93,8 +93,6 @@ class LocationPage(Page):
         max_length=36,
         help_text="Comma separated lat/long. (Ex. 64.144367, -21.939182) \
                    Right click Google Maps and click 'What\'s Here'"
-
-
     )
 
     # Search index configuration
@@ -117,6 +115,12 @@ class LocationPage(Page):
         hours = self.hours_of_operation.all()
         return hours
 
+    def get_context(self, request):
+        context = super(LocationPage, self).get_context(request)
+        context['lat'] = self.lat_long.split(",")[0]
+        context['long'] = self.lat_long.split(",")[1]
+        return context
+
     parent_page_types = [
        'LocationsIndexPage'
     ]

bakerydemo/templates/locations/location_page.html

@@ -2,14 +2,42 @@
 {% load wagtailimages_tags %}
 
 {% block content %}
+
+    <style>
+      /* Needed for Google map embed */
+      #map {
+        height: 100%;
+      }
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+
     <h1>{{ page.title }}</h1>
     <figure>
       {% image self.image fill-600x600 %}
     </figure>
     <p>{{ page.address }}</p>
     <p>{{ page.lat_long }}</p>
-    
+
+    <div id="map"></div>
+    <script>
+      var map;
+      function initMap() {
+        map = new google.maps.Map(document.getElementById('map'), {
+          center: {
+              lat: {{lat}},
+              lng: {{long}}
+          },
+          zoom: 8
+        });
+      }
+    </script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD31CT9P9KxvNUJOwDq2kcFEIG8ADgaFgw&callback=initMap" async defer></script>
+
     {% for hours in page.opening_hours %}
         <li>{{ hours }}</li>
     {% endfor %}
-{% endblock content %}
+{% endblock content %}