Add map to location viewing page.

espressolocator · Feb 3, 2019 · ec2f6cc · ec2f6cc
1 parent 6ccff45
commit ec2f6cc
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 6 deletions.
diff --git a/client/stylesheets/style.css b/client/stylesheets/style.css
@@ -70,8 +70,6 @@ body {
         font-size: 14px;
         display: inline-block;
         color: #aaaaaa; }
-    .location .location-content p {
-      margin: 0; }
   .location .edit-button {
     display: block;
     float: right;

diff --git a/client/templates/locations/location.css b/client/templates/locations/location.css
@@ -3,6 +3,15 @@
   max-width: 100%;
   height: 250px;
   margin-bottom: 10px;
+  clear: both;
+}
+
+.map-container-view {
+  width: 30%;
+  max-width: 30%;
+  height: 250px;
+  margin-bottom: 10px;
+  float: right;
 }
 
 .search-locations {

diff --git a/client/templates/locations/location_edit.js b/client/templates/locations/location_edit.js
@@ -50,7 +50,7 @@ AutoForm.hooks({
 
 Template.locationEdit.onRendered(function() {
   var self = this;
-  this.autorun(function (c) {
+  this.autorun(function(c) {
     if (GoogleMaps.loaded()) {
       var searchNode = self.$("#mapsearch");
       var latlng = AutoForm.getFieldValue('location', 'editLocationForm').split(',');

diff --git a/client/templates/locations/location_page.html b/client/templates/locations/location_page.html
@@ -1,8 +1,17 @@
 <template name="locationPage">
   <div class="location-page page">
-    {{> locationItem}}
-    <div>
-      {{description}}
+    <div class="location">
+      <div class="location-content">
+        <h3>{{title}}</h3>
+        <p>
+          submitted by {{createdBy.author}},
+          {{commentsCount}} comments
+        </p>
+        <p>
+          {{description}}
+        </p>
+      </div>
+      <div class="map-container-view"></div>
     </div>
     <ul class="comments">
       {{#each comments}}

diff --git a/client/templates/locations/location_page.js b/client/templates/locations/location_page.js
@@ -3,3 +3,40 @@ Template.locationPage.helpers({
     return Comments.find({locationId: this._id});
   }
 });
+
+Template.locationPage.onRendered(function() {
+  var self = this;
+  this.autorun(function(c) {
+    if (GoogleMaps.loaded()) {
+      var canvas = self.$('.map-container-view').get(0);
+      var markerLatLng = new google.maps.LatLng(self.data.location.coordinates[1], self.data.location.coordinates[0]);
+      var mapOptions = {
+        zoom: 17,
+        center: markerLatLng,
+        draggable: false,
+        zoomControl: false,
+        disableDoubleClickZoom: true,
+        scrollwheel: false,
+        disableDefaultUI: true
+      };
+      // Create map object.
+      var map = new google.maps.Map(canvas, mapOptions);
+      // Create marker.
+      var marker = new google.maps.Marker({
+        position: markerLatLng,
+        map: map,
+        title: self.data.location.title,
+        icon: 'logo-icon-marker.png',
+        id: self.data.location._id
+      });
+      c.stop();
+    }
+  });
+});
+
+Template.locationPage.onCreated(function() {
+  // Init Googlemaps.
+  GoogleMaps.load({
+    libraries: 'places'
+  });
+});