How to mark locations on a map via an API call?

JavaScript
1

The specification I am trying to complete are as below:

The website shall allow users to view a map with the CoffeeDrop (Name of website) locations marked upon it

These locations should be marked on the map using co-ordinates found in the following API call: http://coffeedrop.staging2.image-plus.co.uk/api/locations

The map should update if a new location is added.

The map could take into account any additional information returned by the API call (but this is optional)

The website should end up looking like this:

obj
obj1920×1080 318 KB

As shown in the image, the bottom section where there is a map with pins placed at different locations.

I am new to using API calls, I only have the following so far:

<script>
      fetch("http://coffeedrop.staging2.image-plus.co.uk/api/locations")
        .then(response => response.json())
        .then(json => console.log(json));
    </script>

Testing in browser this does output in the console

3

Yeah the page is http so this isn’t a problem. The console.log gives what should be expected just to see if the data is received

My confusion is surrounding how you can map each location to the map.

The API endpoint is an object which has longitude and latitude properties. How can I “get” these and show them on a map depeni on the latitude and longitude values?

4

Dont know which map system you’re using, but the term is “markers” in the map lingo, so just google “how to add map markers for your-map-system” (google, mapbox, mapquest, etc.)

In its basic form, a marker just need the lat/long numbers. You can add other stuff to it, popup box, custom icon, custom color, etc… but basically just need a lat/long at the minimum.

5

Think I’m slowly getting there…

  <script>
      function initMap() {
        var location = {
          lat: -25.363,
          lng: 131.044
        };

        var gMap = new google.maps.Map(document.getElementById("map"), {
          zoom: 4,
          center: location
        });

        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
      }
    </script>

    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByavxe_EW7U1HrKbTnICly_bcMfi22L8g&callback=initMap"
    ></script>

This will set just one marker based on the location variable.

Should I create an array of longitude and latitude coordinates from the api http://coffeedrop.staging2.image-plus.co.uk/api/locations then use .map ? Or am I completely off course

7

Not sure if this is anywhere near on the right lines:


   fetch("http://coffeedrop.staging2.image-plus.co.uk/api/locations")
          .then(response => response.json())
          .then(json =>
              json.data.forEach(location => {
                console.log(location.coordinates);
              })
          );
8 
var locations = [];
        fetch("http://coffeedrop.staging2.image-plus.co.uk/api/locations")
          .then(response => response.json())
          .then(json =>
            json.data.forEach(location => {
              locations.push(location.coordinates);
              console.log(locations);
            })
          );

lnglat
lnglat821×792 19.8 KB

Getting very confused here as either .map or .forEach loop is adding all latitude and longitude coordinates for each iteration resulting in an array locations which has repeated latitude and longitude coordinates as shown in the console image above…