How do I add google map api code to dmx google maps?

Hello,

I am new to wappler and coding in general. I am trying to build a step by step app that has maps on different pages and on the final page it adds each of the markers per page all together and creates a polyline.

I have manage to make it work on the index page within the script tag. However, I then tried to make the pages and the map does not seem to load after clicking continue from the page before it. I also would rather link the dmx markers to the dmx google maps instead of what I have at the moment with static markers [coordinates].

So is there any way to add code to the dmx google map and the markers so they can be all linked together and I can add/update on drag the polyline?

I’ll greatly appreciate your suggestions,

Thanks.

    <script type="text/javascript">

                                        // Initialize and add the map

                                                        var map;

                                                        function haversine_distance(mk1, mk2) {

                                                        var R = 6371.0710; // Radius of the Earth in miles

                                                        var rlat1 = mk1.position.lat() * (Math.PI/180); // Convert degrees to radians

                                                        var rlat2 = mk2.position.lat() * (Math.PI/180); // Convert degrees to radians

                                                        var difflat = rlat2-rlat1; // Radian difference (latitudes)

                                                        var difflon = (mk2.position.lng()-mk1.position.lng()) * (Math.PI/180); // Radian difference (longitudes)

                                                        

                                                        var d = 2 * R * Math.asin(Math.sqrt(Math.sin(difflat/2)*Math.sin(difflat/2)+Math.cos(rlat1)*Math.cos(rlat2)*Math.sin(difflon/2)*Math.sin(difflon/2)));

                                                        return d;

                                                        }

                                                        function initMap() {

                                                          

                                                          const center = {lat: 54.76265, lng: -1.3818};

                                                          const options = {zoom: 19, scaleControl: true, center: center,mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false,streetViewControl: false,rotateControl:false,overviewMapControl:false,fullscreenControl:false};

                                                          map = new google.maps.Map(

                                                              document.getElementById('ReviewMap'), options);

                                                              

                                                          // Locations of landmarks

                                                          const box1 = {lat: 54.762715, lng: -1.3821};

                                                          const box2 = {lat: 54.7627, lng: -1.38156};

                                                          const bm1 = {lat: 54.762714, lng: -1.382};

                                                          const bm2 = {lat: 54.762685, lng: -1.3817};


                                                          var mk1 = new google.maps.Marker({position: box1, map: map});

                                                          var mk2 = new google.maps.Marker({position: box2, map: map});

                                                          var mk3 = new google.maps.Marker({position: bm1, map: map});

                                                          var mk4 = new google.maps.Marker({position: bm2, map: map});

            

                                                        // Draw a line showing the straight distance between the markers*/

                                                        var line = new google.maps.Polyline({path: [box1, bm1, bm2, box2], map: map,geodesic: true,strokeColor: '#4986E7',strokeOpacity: 1.0,strokeWeight: 6});

                                                                                                            

                                                        /*var distance = haversine_distance(mk1, mk2);

                                                        document.getElementById('msg').innerHTML = "Distance between markers: " + distance.toFixed(2) + " km.";*/

                                                        

                                                        }

                                                        window.onload = initMap;
</script>

What loads on wappler:

what loads on the local server using framework7: