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,11 +1,12 @@
 """FlaskGoogleMaps - Google Maps Extension for Flask"""
 
-__version__ = "0.4.0"
+__version__ = "0.4.2"
 
 from json import dumps
 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
 

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>