can we add dynamic data like moving vehicle without refreshing page?

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Dyanamic data loading? about flask-googlemaps HOT 1 CLOSED

flask-extensions commented on May 19, 2024

Dyanamic data loading?

from flask-googlemaps.

Comments (1)

rochacbruno commented on May 19, 2024

@koustubhavachat added in 0.2.2

you can now reference map via varname and change markers position or create new markers in JavaScript

Take a look at example.py

movingmap = Map(
        identifier="movingmap",
        varname="movingmap",
        lat=37.4419,
        lng=-122.1419,
        markers=[
            {
                'lat': 37.4500,
                'lng': -122.1350
            }
        ],
        zoom=12
    )

adding new marker

<button onclick='onclick='new google.maps.Marker({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)''>Add new marker above</button>

to destroy a marker use marker.setMap(null)

<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='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.44, lng:-122.135})})'>Go to position 1 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.443, lng:-122.135})})'>Go to position 2 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.445, lng:-122.135})})'>Go to position 3 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.449, lng:-122.135})})'>Go to position 4 </button>