WIP: Update dependencies and functionality

- Update dependencies (Flask, mypy, python >3.8)
- Load javascript in an async manner
- Replace obsolete `Marker` with `AdvancedMarkerElement`

Author: argysamo

examples/templates/example.html

@@ -151,7 +151,8 @@ <h2>You can move markers dynamically and add new markers, refresh its position e
 <br />
 <button onclick='movingmap_markers.map(function(mk){mk.setMap(null)})'>Remove marker</button>
 <button onclick='movingmap_markers.map(function(mk){mk.setMap(movingmap)})'>Restore marker</button>
-<button onclick='new google.maps.Marker({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)'>Add New Marker Above</button>
+const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+<button onclick='new AdvancedMarkerElement({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)'>Add New Marker Above</button>
 
 
     <pre>
@@ -161,7 +162,7 @@ <h2>You can move markers dynamically and add new markers, refresh its position e
 &lt;button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.449, lng:-122.135})})'&gt;Go to position 4 &lt;/button&gt;
 &lt;button onclick='movingmap_markers.map(function(mk){mk.setMap(null)})'&gt;Remove marker&lt;/button&gt;
 &lt;button onclick='movingmap_markers.map(function(mk){mk.setMap(movingmap)})'&gt;Restore marker&lt;/button&gt;
-&lt;button onclick='onclick='new google.maps.Marker({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)''&gt;Add new marker above&lt;/button&gt;
+&lt;button onclick='onclick='AdvancedMarkerElement({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)''&gt;Add new marker above&lt;/button&gt;
     </pre>
 
 

flask_googlemaps/__init__.py

@@ -1,14 +1,14 @@
 """FlaskGoogleMaps - Google Maps Extension for Flask"""
 
-__version__ = "0.4.1"
+__version__ = "0.4.2"
 
 from json import dumps
-from typing import Optional, Dict, Any, List, Union, Tuple, Text  # noqa: F401
-
+from typing import Optional, Dict, Any, List, Union, Tuple, Text
 import requests
-from flask import Blueprint, Markup, g, render_template
+from flask import Blueprint, g, render_template
+from markupsafe import Markup
 
-from flask_googlemaps.icons import dots, Icon  # noqa: F401
+from flask_googlemaps.icons import dots, Icon
 
 DEFAULT_ICON = dots.red
 DEFAULT_CLUSTER_IMAGE_PATH = "static/images/m"
@@ -28,8 +28,7 @@ def __init__(
         cls="map",  # type: str
         language="en",  # type: str
         region="US",  # type: str
-        rectangles=None,
-        # type: Optional[List[Union[List, Tuple, Tuple[Tuple], Dict]]]
+        rectangles=None,  # type: Optional[List[Union[List, Tuple, Tuple[Tuple], Dict]]]
         circles=None,  # type: Optional[List[Union[List, Tuple, Dict]]]
         polylines=None,  # type: Optional[List[Union[List, Tuple, Dict]]]
         polygons=None,  # type: Optional[List[Union[List, Tuple, Dict]]]
@@ -258,20 +257,13 @@ def build_rectangle_dict(
             "stroke_weight": stroke_weight,
             "fill_color": fill_color,
             "fill_opacity": fill_opacity,
-            "bounds": {
-                "north": north,
-                "west": west,
-                "south": south,
-                "east": east,
-            },
+            "bounds": {"north": north, "west": west, "south": south, "east": east},
         }
 
         return rectangle
 
-    def add_rectangle(
-        self, north=None, west=None, south=None, east=None, **kwargs
-    ):
-        # type: (Optional[float], Optional[float], Optional[float], Optional[float], **Any) -> None # noqa: E501
+    def add_rectangle(self, north=None, west=None, south=None, east=None, **kwargs):
+        # type: (Optional[float], Optional[float], Optional[float], Optional[float], **Any) -> None
         """Adds a rectangle dict to the Map.rectangles attribute
 
         The Google Maps API describes a rectangle using the LatLngBounds
@@ -306,9 +298,7 @@ def add_rectangle(
         if east:
             kwargs["bounds"]["east"] = east
 
-        if set(("north", "east", "south", "west")) != set(
-            kwargs["bounds"].keys()
-        ):
+        if set(("north", "east", "south", "west")) != set(kwargs["bounds"].keys()):
             raise AttributeError("rectangle bounds required to rectangles")
 
         kwargs.setdefault("stroke_color", "#FF0000")
@@ -357,9 +347,7 @@ def build_circles(self, circles):
             elif isinstance(circle, (tuple, list)):
                 if len(circle) != 3:
                     raise AttributeError("circle requires center and radius")
-                circle_dict = self.build_circle_dict(
-                    circle[0], circle[1], circle[2]
-                )
+                circle_dict = self.build_circle_dict(circle[0], circle[1], circle[2])
                 self.add_circle(**circle_dict)
 
     def build_circle_dict(
@@ -408,9 +396,7 @@ def build_circle_dict(
 
         return circle
 
-    def add_circle(
-        self, center_lat=None, center_lng=None, radius=None, **kwargs
-    ):
+    def add_circle(self, center_lat=None, center_lng=None, radius=None, **kwargs):
         # type: (Optional[float], Optional[float], Optional[float], **Any) -> None
         """Adds a circle dict to the Map.circles attribute
 
@@ -759,16 +745,14 @@ def build_heatmap(self, heatmap_data, heatmap_layer):
             raise AttributeError("heatmap_later requires 'heatmap_data'")
         if not isinstance(heatmap_data, (list)):
             raise AttributeError(
-                "heatmap_data only accepts a list of dicts with keys "
-                "'lat' 'lng' and their corresponding values"
+                "heatmap_data only accepts a list of dicts with keys 'lat' 'lng' and their corresponding values"
             )
         for hm in heatmap_data:
             if isinstance(hm, dict):
                 self.add_heatmap(**hm)
             else:
                 raise AttributeError(
-                    "elements of list 'heatmap_data' must be a dict of keys "
-                    "'lat' and 'lng' with their corresponding values"
+                    "elements of list 'heatmap_data' must be a dict of keys 'lat' and 'lng' with their corresponding values"
                 )
 
     def add_heatmap(self, lat=None, lng=None, **kwargs):
@@ -780,9 +764,7 @@ def add_heatmap(self, lat=None, lng=None, **kwargs):
         if "lat" not in kwargs or "lng" not in kwargs:
             raise AttributeError("heatmap_data requires 'lat' and 'lng' values")
         if len(kwargs) > 2:
-            raise AttributeError(
-                "heatmap_data can only contain 'lat' and 'lng' values"
-            )
+            raise AttributeError("heatmap_data can only contain 'lat' and 'lng' values")
 
         self.heatmap_data.append(kwargs)
 
@@ -839,9 +821,7 @@ def verify_lat_lng_coordinates(self, lat, lng):
     def js(self):
         # type: () -> Markup
         return Markup(
-            self.render(
-                "googlemaps/gmapjs.html", gmap=self, DEFAULT_ICON=DEFAULT_ICON
-            )
+            self.render("googlemaps/gmapjs.html", gmap=self, DEFAULT_ICON=DEFAULT_ICON)
         )
 
     @property
@@ -881,30 +861,18 @@ def set_googlemaps_loaded():
 def get_address(API_KEY, lat, lon):
     # type: (str, float, float) -> dict
     add_dict = dict()
-    response = requests.get(
+    response = rq.get(
         "https://maps.googleapis.com/maps/api/geocode/json?latlng="
         + ",".join(map(str, [lat, lon]))
         + "&key="
         + API_KEY
     ).json()
-    add_dict["zip"] = response["results"][0]["address_components"][-1][
-        "long_name"
-    ]
-    add_dict["country"] = response["results"][0]["address_components"][-2][
-        "long_name"
-    ]
-    add_dict["state"] = response["results"][0]["address_components"][-3][
-        "long_name"
-    ]
-    add_dict["city"] = response["results"][0]["address_components"][-4][
-        "long_name"
-    ]
-    add_dict["locality"] = response["results"][0]["address_components"][-5][
-        "long_name"
-    ]
-    add_dict["road"] = response["results"][0]["address_components"][-6][
-        "long_name"
-    ]
+    add_dict["zip"] = response["results"][0]["address_components"][-1]["long_name"]
+    add_dict["country"] = response["results"][0]["address_components"][-2]["long_name"]
+    add_dict["state"] = response["results"][0]["address_components"][-3]["long_name"]
+    add_dict["city"] = response["results"][0]["address_components"][-4]["long_name"]
+    add_dict["locality"] = response["results"][0]["address_components"][-5]["long_name"]
+    add_dict["road"] = response["results"][0]["address_components"][-6]["long_name"]
     add_dict["formatted_address"] = response["results"][0]["formatted_address"]
     return add_dict
 
@@ -942,9 +910,7 @@ def init_app(self, app):
         app.add_template_global(googlemap_obj)
         app.add_template_filter(googlemap)
         app.add_template_global(googlemap)
-        app.add_template_global(
-            app.config.get("GOOGLEMAPS_KEY"), name="GOOGLEMAPS_KEY"
-        )
+        app.add_template_global(app.config.get("GOOGLEMAPS_KEY"), name="GOOGLEMAPS_KEY")
         app.add_template_global(set_googlemaps_loaded)
         app.add_template_global(is_googlemaps_loaded)
 

flask_googlemaps/templates/googlemaps/gmapjs.html

@@ -1,11 +1,11 @@
 {% if not is_googlemaps_loaded() and not gmap.heatmap_layer %} {% if GOOGLEMAPS_KEY %}
-<script src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}" type="text/javascript"></script>
+<script async src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}" type="text/javascript"></script>
 {% else %}
-<script src="//maps.googleapis.com/maps/api/js?language={{gmap.language}}&region={{gmap.region}}" type="text/javascript"></script>
+<script async src="//maps.googleapis.com/maps/api/js?language={{gmap.language}}&region={{gmap.region}}" type="text/javascript"></script>
 {% endif %} {{ set_googlemaps_loaded() }} {% endif %}{% if gmap.cluster %}
 <script src="//cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer_compiled.js" type="text/javascript"></script>
 {% endif %}{% if gmap.heatmap_layer %}{% if GOOGLEMAPS_KEY %}
-<script src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}&libraries=visualization" type="text/javascript"></script>
+<script async src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}&libraries=visualization" type="text/javascript"></script>
 {% endif %}{% endif%}
 
 
@@ -23,7 +23,7 @@
 	 var {{gmap.varname}}_polylines = [];
 	 var prev_infowindow_{{gmap.varname}} = null;
 
-	 function initialize_{{gmap.varname}}() {
+	 async function initialize_{{gmap.varname}}() {
 	     document.getElementById('{{gmap.identifier}}').style.display = 'block';
 	     {{gmap.varname}} = new google.maps.Map(
 	     document.getElementById('{{gmap.identifier}}'), {
@@ -37,7 +37,8 @@
 	         rotateControl: {% if gmap.rotate_control %}true{% else %}false{% endif %},
 	         scrollwheel: {% if gmap.scroll_wheel %}true{% else %}false{% endif %},
 	         fullscreenControl: {% if gmap.fullscreen_control %}true{% else %}false{% endif %},
-	         styles: {{ gmap.styles | tojson  }}
+	         styles: {{ gmap.styles | tojson  }},
+             mapId: "{{ gmap.mapId if gmap.mapId is defined else 'DEMO_MAP_ID' }}"
 	     });
 
 	     //center map location on user location
@@ -82,13 +83,12 @@
 
 	     // add gmap markers
 	     var raw_markers = {{gmap.markers|tojson|safe}};
+         const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
 	     for(i=0; i<{{gmap.markers|length}};i++) {
-	           tempMarker = new google.maps.Marker({
+	           tempMarker = new AdvancedMarkerElement({
 	             position: new google.maps.LatLng(raw_markers[i].lat, raw_markers[i].lng),
 	             map: {{gmap.varname}},
-	             icon: raw_markers[i].icon,
 	             title: raw_markers[i].title ? raw_markers[i].title : null,
-	             label: raw_markers[i].label ? raw_markers[i].label : null
 	   	        });
 
 
@@ -298,6 +298,6 @@
 	         window.onload = init_{{gmap.identifier}}_button;
 	     }
 	 {% else %}
-	     google.maps.event.addDomListener(window, 'load', initialize_{{gmap.varname}});
+	     window.addEventListener('load', initialize_{{gmap.varname}});
 	 {% endif %}
 </script>