Use Google Places for map box search

Also:

* Upgrades `leaflet` to 1.0.0 final.
* Removes `leaflet.search` which was not working reliably (not even in their own demos...)
* Map uses full width of form container by default
* Ability to use a new app configuration key `GOOGLE_MAPS_API_KEY`. [This allows for increased daily quotas and ability to track usage](https://developers.google.com/maps/documentation/javascript/get-api-key). Note that this key must have Google Places API enable. See link.

flask_admin/contrib/geoa/widgets.py

@@ -22,7 +22,7 @@ class LeafletWidget(TextArea):
         editable.
     """
     def __init__(
-            self, width=300, height=300, center=None,
+            self, width='auto', height=350, center=None,
             zoom=None, min_zoom=None, max_zoom=None, max_bounds=None):
         self.width = width
         self.height = height

flask_admin/static/admin/js/form.js

@@ -195,34 +195,35 @@
         }
         var drawControl = new L.Control.Draw(drawOptions);
         map.addControl(drawControl);
-
-        if (window.google) {
-          var geocoder = new google.maps.Geocoder();
-
-          function googleGeocoding(text, callResponse) {
-            geocoder.geocode({address: text}, callResponse);
-          }
-
-          function filterJSONCall(rawjson) {
-            var json = {}, key, loc, disp = [];
-            for (var i in rawjson) {
-              key = rawjson[i].formatted_address;
-              loc = L.latLng(rawjson[i].geometry.location.lat(),
-                             rawjson[i].geometry.location.lng());
-              json[key] = loc;
+        if (window.MAPBOX_SEARCH) {
+          var circle = L.circleMarker([0, 0]);
+          var $autocompleteEl = $('<input style="position: absolute; z-index: 9999; display: block; margin: -42px 0 0 10px; width: 50%">');
+          var $form = $($el.get(0).form);
+
+          $autocompleteEl.insertAfter($map);
+          $form.on('submit', function (evt) {
+            if ($autocompleteEl.is(':focus')) {
+              evt.preventDefault();
+              return false;
             }
-            return json;
-          }
-
-          map.addControl(new L.Control.Search({
-            callData: googleGeocoding,
-            filterJSON: filterJSONCall,
-            markerLocation: true,
-            autoType: false,
-            autoCollapse: true,
-            minLength: 2,
-            zoom: 10
-          }));
+          });
+          var autocomplete = new google.maps.places.Autocomplete($autocompleteEl.get(0));
+          autocomplete.addListener('place_changed', function() {
+            var place = autocomplete.getPlace();
+            var loc = place.geometry.location;
+            var viewport = place.geometry.viewport;
+            circle.setLatLng(L.latLng(loc.lat(), loc.lng()));
+            circle.addTo(map);
+            if (viewport) {
+              map.fitBounds([
+                viewport.getNorthEast().toJSON(),
+                viewport.getSouthWest().toJSON(),
+              ]);
+            }
+            else {
+              map.fitBounds(circle.getBounds());
+            }
+          });
         }
 
 

flask_admin/static/vendor/leaflet/images/spritesheet.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 60" height="60" width="540">
+    <g id="enabled" fill="#464646">
+        <g id="polyline">
+            <path d="M18 36v6h6v-6h-6zm4 4h-2v-2h2v2z"/>
+            <path d="M36 18v6h6v-6h-6zm4 4h-2v-2h2v2z"/>
+            <path d="M23.142 39.145l-2.285-2.29 16-15.998 2.285 2.285z"/>
+        </g>
+        <path id="polygon" d="M100 24.565l-2.096 14.83L83.07 42 76 28.773 86.463 18z"/>
+        <path id="rectangle" d="M140 20h20v20h-20z"/>
+        <path id="circle" d="M221 30c0 6.078-4.926 11-11 11s-11-4.922-11-11c0-6.074 4.926-11 11-11s11 4.926 11 11z"/>
+        <path id="marker" d="M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z"/>
+        <g id="edit">
+            <path d="M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345 l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156"/>
+            <path d="M338.72 24.637l-8.892 8.892H327V30.7l8.89-8.89z"/>
+            <path d="M338.697 17.826h4v4h-4z" transform="rotate(-134.99 340.703 19.817)"/>
+        </g>
+        <g id="remove">
+            <path d="M381 42h18V24h-18v18zm14-16h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26z"/>
+            <path d="M395 20v-4h-10v4h-6v2h22v-2h-6zm-2 0h-6v-2h6v2z"/>
+        </g>
+    </g>
+    <g id="disabled" fill="#bbb" transform="translate(120)">
+        <use xlink:href="#edit" id="edit-disabled"/>
+        <use xlink:href="#remove" id="remove-disabled"/>
+    </g>
+</svg>

flask_admin/static/vendor/leaflet/leaflet.search.css

-/* 
- * Leaflet Control Search v1.5.7 - 2015-05-07 
- * 
- * Copyright 2014 Stefano Cudini 
- * stefano.cudini@gmail.com 
- * http://labs.easyblog.it/ 
- * 
- * Licensed under the MIT license. 
- * 
- * Demo: 
- * http://labs.easyblog.it/maps/leaflet-search/ 
- * 
- * Source: 
- * git@github.com:stefanocudini/leaflet-search.git 
- * 
- */
-
-.leaflet-container .leaflet-control-search{position:relative;float:left;background:#fff;color:#1978cf;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:rgba(255,255,255,.8);z-index:1000;box-shadow:0 1px 7px rgba(0,0,0,.65);margin-left:10px;margin-top:10px}.leaflet-control-search.search-exp{box-shadow:0 1px 7px #999;background:#fff}.leaflet-control-search .search-input{display:block;float:left;background:#fff;border:1px solid #666;border-radius:2px;height:18px;padding:0 18px 0 2px;margin:3px 0 3px 3px}.leaflet-control-search.search-load .search-input{background:url(./images/loader.gif) no-repeat center right #fff}.leaflet-control-search.search-load .search-cancel{visibility:hidden}.leaflet-control-search .search-cancel{display:block;width:22px;height:18px;position:absolute;right:22px;margin:3px 0;background:url(./images/search-icon.png) no-repeat 0 -46px;text-decoration:none;filter:alpha(opacity=80);opacity:.8}.leaflet-control-search .search-cancel:hover{filter:alpha(opacity=100);opacity:1}.leaflet-control-search .search-cancel span{display:none;font-size:18px;line-height:20px;color:#ccc;font-weight:700}.leaflet-control-search .search-cancel:hover span{color:#aaa}.leaflet-control-search .search-button{display:block;float:left;width:26px;height:26px;background:url(./images/search-icon.png) no-repeat 2px 2px;border-radius:4px}.leaflet-control-search .search-button:hover{background:url(./images/search-icon.png) no-repeat 2px -22px}.leaflet-control-search .search-tooltip{position:absolute;top:100%;left:0;float:left;min-width:120px;max-height:122px;box-shadow:1px 1px 6px rgba(0,0,0,.4);background-color:rgba(0,0,0,.25);z-index:1010;overflow-y:auto;overflow-x:hidden}.leaflet-control-search .search-tip{margin:2px;padding:2px 4px;display:block;color:#000;background:#eee;border-radius:.25em;text-decoration:none;white-space:nowrap;vertical-align:center}.leaflet-control-search .search-button:hover,.leaflet-control-search .search-tip-select,.leaflet-control-search .search-tip:hover{background-color:#fff}.leaflet-control-search .search-alert{cursor:pointer;clear:both;font-size:.75em;margin-bottom:5px;padding:0 .25em;color:#e00;font-weight:700;border-radius:.25em}

flask_admin/templates/bootstrap2/admin/lib.html

@@ -219,11 +219,8 @@
   <link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='3.5.2') }}" rel="stylesheet">
   <link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css', v='1.3.22') }}" rel="stylesheet">
   {% if config.MAPBOX_MAP_ID %}
-  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='0.7.3') }}" rel="stylesheet">
-  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.2.3') }}" rel="stylesheet">
-  {% if config.MAPBOX_SEARCH %}
-  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.search.css', v='1.5.7') }}" rel="stylesheet">
-  {% endif %}
+  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.0') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.3.2') }}" rel="stylesheet">
   {% endif %}
   {% if editable_columns %}
   <link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap2-editable.css', v='1.5.1.1') }}" rel="stylesheet">
@@ -241,8 +238,10 @@
   <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='0.7.3') }}"></script>
   <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.2.3') }}"></script>
   {% if config.MAPBOX_SEARCH %}
-  <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
-  <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.search.js', v='1.5.7') }}"></script>
+  <script>
+  window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
+  </script>
+  <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
   {% endif %}
   {% endif %}
   <script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>

flask_admin/templates/bootstrap3/admin/lib.html

@@ -210,8 +210,8 @@
   <link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap3.css', v='1.4.6') }}" rel="stylesheet">
   <link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs3.css', v='1.3.22') }}" rel="stylesheet">
   {% if config.MAPBOX_MAP_ID %}
-  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='0.7.3') }}" rel="stylesheet">
-  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.2.3') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.0') }}" rel="stylesheet">
+  <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.3.2') }}" rel="stylesheet">
   {% endif %}
   {% if editable_columns %}
   <link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap3-editable.css', v='1.5.1.1') }}" rel="stylesheet">
@@ -226,8 +226,14 @@
   window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
   {% endif %}
   </script>
-  <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='0.7.3') }}"></script>
-  <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.2.3') }}"></script>
+  <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='1.0.0') }}"></script>
+  <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.3.2') }}"></script>
+  {% if config.MAPBOX_SEARCH %}
+  <script>
+  window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
+  </script>
+  <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
+  {% endif %}
   {% endif %}
   <script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
   {% if editable_columns %}