WIP: Update javascript

- Replace javascript for loops with jinja. I did this in order to create "dynamic" js variables to have an "img" icon.
- This is not clever though. I will revert the js loop and then use jinja2 to create the img element when needed

Author: argysamo

examples/simple.py

@@ -7,9 +7,11 @@
 GoogleMaps(app)
 
 red = Pin(border_color="", glyph_color="",
-          background="")
+          background="",
+          glyph="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png")
 blue = Pin(border_color="blue", glyph_color="",
-           background="black")
+           background="black",
+           glyph="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png")
 
 
 @app.route("/")
@@ -20,7 +22,7 @@ def map_created_in_view():
         lat=37.4419,
         lng=-122.1419,
         markers={
-            red: [(37.4419, -122.1419), (37.4500, -122.1350)],
+            red: [(37.4419, -122.1419),],
             blue: [(37.4300, -122.1400, "Hello World")],
         },
         style="height:400px;width:600px;margin:0;",

flask_googlemaps/pin.py

@@ -1,4 +1,5 @@
-from dataclasses import dataclass
+import uuid
+from dataclasses import dataclass, field
 from typing import Optional
 
 
@@ -8,4 +9,5 @@ class Pin:
     glyph_color: str
     background: str
     glyph: Optional[str] = None
+    uuid: Optional[str] = field(default_factory=lambda: f"_{str(uuid.uuid1())[0:8]}")
     scale: float = 1.0

flask_googlemaps/templates/googlemaps/gmapjs.html

@@ -83,41 +83,51 @@
 
 	     // add gmap markers
          const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
-
-         for (const marker of {{gmap.markers|tojson|safe}}) {
-	           tempMarker = new AdvancedMarkerElement({
-	             position: new google.maps.LatLng(marker.lat, marker.lng),
+         {% for marker in gmap.markers %}
+{#             {% if "http" in marker.pin.glyph %}#}
+                 const {{ marker['pin'].uuid }} = document.createElement("img");
+                 {{ marker['pin'].uuid }}.src = "{{marker['pin'].glyph}}";
+{#             {% else %}#}
+{#                 const {{ marker.pin.uuid }} = new PinElement({#}
+{#                     glyphColor: marker.pin.glyph_color,#}
+{#                     background: marker.pin.background,#}
+{#                     borderColor: marker.pin.border_color,#}
+{#                     glyph: marker.pin.glyph,#}
+{#                                        }).element#}
+{#             {% endif %}#}
+
+             tempMarker = new AdvancedMarkerElement({
+	             position: new google.maps.LatLng({{marker['lat']}}, {{marker['lng']}}),
 	             map: {{gmap.varname}},
-	             title: marker.title ? marker.title : null,
-                 content: new PinElement({
-                     glyphColor: marker.pin.glyph_color,
-                     background: marker.pin.background,
-                     borderColor: marker.pin.border_color,
-                     glyph: marker.pin.glyph,
-                                        }).element,
+	             title: {{marker['title'] if marker['title'] is defined else 'null'}},
+                 content: {{ marker['pin'].uuid }}
 	   	        });
 
 
-	        if(marker.infobox)
-	        {
+             {% if marker['infobox'] is defined %}
+
 	             google.maps.event.addListener(
 						tempMarker,
 	                    'click',
-	                    getInfoCallback({{gmap.varname}}, marker.infobox)
+	                    getInfoCallback({{gmap.varname}}, "{{marker['infobox']}}")
 	             );
-	        }
 
-			if("{{gmap.report_markerClickpos}}" === "True" )
-	          {
+             {% endif %}
+
+             {% if gmap.report_markerClickpos %}
 	              google.maps.event.addListener(
 						tempMarker,
 	                    'click',
-	                    function (event) { markerClickposCallback('{{gmap.markerClickpos_uri}}', event.latLng, marker.title, marker.label)}
+	                    function (event) { markerClickposCallback('{{gmap.markerClickpos_uri}}', event.latLng, marker['title'], marker['label'])}
 	            );
-	          }
+             {% endif %}
 			  {{gmap.varname}}_markers.push(tempMarker);
 
-	     }
+         {% endfor %}
+
+         {#for (const marker of {{gmap.markers|tojson|safe}}) {#}
+         {##}
+	     {#}#}
 
 
 	     {% if gmap.report_clickpos %}