Better map support

static/index.html

@@ -8,9 +8,9 @@
         th {
             white-space: nowrap;
         }
-        div#map {
+        div#map, svg#svg {
             width: 100%;
-            height: 500px;
+            height: 400px;
         }
         </style>
     </head>
@@ -91,7 +91,7 @@
                     <div class="tab-content">
                         <div id="semTab" class="tab-pane fade in active">
                             <h3>Semantic Tweaker</h3>
-                            <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"></svg>
+                            <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
                         </div>
                         <div id="mapTab" class="tab-pane fade">
                             <h3>Result Map</h3>
@@ -171,7 +171,7 @@
         <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
         <script src="scripts/search.js"></script>
         <script src="scripts/grapher.js"></script>
-        <script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
+        <script src="https://maps.googleapis.com/maps/api/js"></script>
 
     </body>
 </html>

static/scripts/grapher.js

@@ -86,7 +86,7 @@
         var _densitySize    = 10;
         var _desatOffset    = -0.3;
         var _easeTime       = 400;
-        var _height         = 500;
+        var _height         = 400;
         var _padding        = 10;
         var _panelSize      = 40;
         var _tickSize       = 8;

static/scripts/search.js

@@ -40,9 +40,25 @@
             sortKey: 'score',
             sortAsc: false,
             query:   {},
+            markers: [],
             geo:     geo
         };
 
+        var options = {
+            center: { lat: 35.6833, lng: 139.7667 }, zoom: 8
+        };
+
+        if (geo !== null) {
+            options.center = {
+                lat: geo.coords.latitude,
+                lng: geo.coords.longitude
+            };
+        }
+
+        _ctx.map = new google.maps.Map(
+            document.getElementById('map'), options
+        );
+
         Handlebars.registerHelper('prettyFloat', function(precision, options) {
             return parseFloat(options.fn(this)).toFixed(precision);
         });
@@ -57,7 +73,7 @@
         });
         $('.nav-tabs a').on('shown.bs.tab', function (e) {
             if ($(e.target).attr('href') === '#mapTab') {
-                google.maps.event.trigger(window.map, 'resize');
+                google.maps.event.trigger(_ctx.map, 'resize');
             }
         });
 
@@ -171,6 +187,19 @@
         $('#records').empty();
         $('#records').append(template({records: records}));
 
+        for (var i = 0; i < _ctx.markers.length; ++i) {
+            _ctx.markers[i].setMap(null);
+        }
+        _ctx.markers = [];
+
+        for (var j = 0; j < records.length; ++j) {
+            var record = records[j];
+            var pos    = { lat: record.geo.latitude, lng: record.geo.longitude };
+            var marker = new google.maps.Marker({ position: pos, map: _ctx.map, title: record.name });
+
+            _ctx.markers.push(marker);
+        }
+
         $('span.sort-icon').css('visibility', 'hidden');
         var currentColumn = $('span.sort-icon[data-sort="' + _ctx.sortKey + '"]').css('visibility', 'visible');
         if (_ctx.sortAsc) {
@@ -198,14 +227,6 @@
         }
     };
 
-    window.initMap = function() {
-        window.map = new google.maps.Map(
-            document.getElementById('map'),
-            {center: {lat: -34.397, lng: 150.644}, zoom: 8}
-        );
-    };
-
-
     $(document).on({
         ajaxStart: function() {
             $('#spinner').show();