Streaming live at 10am (PST)

Modify JavaScript from Spreadsheet/Database/Other


#1

Does anyone know of a method to modify an existing JavaScript file from some type of third party system, database, etc? I have a custom map with multiple markers, that requires adding several lines of code for each additional map marker location. I'd like to make the process simpler by allowing my client to add the information into a form, spreadsheet, or database of some type, so that I don't have to modify the JavaScript file every time they add a location.

Does anyone have any suggestions? The best case scenario would be some type of form on an admin page for the client's site, that automatically populates the data into a new section of code in the JavaScript file.

Here is a sample of what each section of code looks like for each location:

"Location 1"

var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(42.4495763, -83.65064);
var image1 = 'https://daks2k3a4ib2z.cloudfront.net/56e6dd14b4a0d57a57b0b66c/56f55052feb170fe27e374b8_mapmarker.png';
var marker1 = new google.maps.Marker({position:latlng1, map:map, icon:image1});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('<h4 id="firstHeading" class="firstHeading">Bakman Florist</h4>'+
                    '<div id="bodyContent">'+
                    '<div class="map-text">22880 Pontiac Trail<br>' +
                    'South Lyon, MI 48178<br>'+
                    '<a class="text-link" href="http://southlyonflorist.com/" target="_blank">southlyonflorist.com</a></div>'+
                    '</div>');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);

"Location 2"

                          
var infowindow = new google.maps.InfoWindow();

var latlng2 = new google.maps.LatLng(42.3682311, -83.3603329);
var marker2 = new google.maps.Marker({position:latlng2, map:map, icon:image1});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('<h4 id="firstHeading" class="firstHeading">Cardwell Florist</h4>'+
                    '<div id="bodyContent">'+
                    '<div class="map-text">32109 Plymouth Rd<br>' +
                    'Livonia, MI 48150<br>'+
                    '<a class="text-link" href="http://cardwellflorist.com/" target="_blank">cardwellflorist.com</a></div>'+
                    '</div>');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

#2

Hi @jordanshotwell, have you tried to use the dynamic embed code feature? This way, you could create fields in the collection for each record, and create a text field to hold the values that change from record to record, and insert those values to the custom code using the dynamic embed.

See more here for an example using a dynamic embed: https://help.webflow.com/article/how-to-use-dynamic-embeds-on-your-webflow-site

Let me know if that helps!


#3