CMS collection to JSON

Design help CMS
#1

Hello All,

I’m trying to create a Google Maps store locator using data from a CMS collection (example).

The code below is a simple test, however I haven’t been able to figure out how to use dynamic lists to solve this. The closest thing I found was “Creating a map that uses a collection to display multiple locations”, but there are 500+ entries so creating empty placeholders isn’t maintainable.

function initMap() {
  var myMapCenter = {lat: 40.785091, lng: -73.968285};

  // Create a map object and specify the DOM element for display.
      var map = new google.maps.Map(document.getElementById('map'), {
	center: myMapCenter,
	zoom: 14
      });

  function markStore(storeInfo){

	// Create a marker and set its position.
	var marker = new google.maps.Marker({
		map: map,
		position: storeInfo.location,
		title: storeInfo.name
	});

	// show store info when marker is clicked
	marker.addListener('click', function(){
		showStoreInfo(storeInfo);
	});
  }

  // show store info in text box
  function showStoreInfo(storeInfo){
	var info_div = document.getElementById('map_info');
	info_div.innerHTML = 'Store name: '
		+ storeInfo.name
		+ '<br>Address: ' + storeInfo.address;
  }

  var stores = [
	{
		name: 'Store 1',
		location: {lat: 40.785091, lng: -73.968285},
		address: '123 World Way'
	},
	{
		name: 'Store 2',
		location: {lat: 40.790091, lng: -73.968285},
		address: '100 Galaxy Dr'
	}
  ];

  stores.forEach(function(store){
	markStore(store);
  });
}

Is there a way to get data from a CMS collection in JSON format to replace the “stores” object?
I read in another post that AJAX requests are not currently possible with Webflow’s API.

Is there a work around for this? Any help is much appreciated :slight_smile:
Andy

Here is my public share link: LINK
Here is the live site link: LINK

#2

You can fetch a collection via the api, then parse it as needed, then serve it back into your site with a call to an endpoint that processed the request and returns what you need via Ajax.

#3

Thanks for your answer @webdev, and sorry for the late reply.

Are we able to fetch the collections using AJAX? Getting a CORS error when making the request.
Using another server isn’t an option atm.

#4

Well the API can really only be used from a server (node for example). It is not a client side solution.