Simple Markers

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
      <h1>Test</h1>
  <div id="map"></div>
  <p id="demo"></p>

  <input type="text" placeholder="Type something..." id="myInput">
  <button type="button" onclick="getInputValue();">Get Value</button>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 60%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  function getTown() {
    // use provided response instead of response from server
    //  const response = await fetch(api_url + '/' + town, requestOptions);
    //  const data = await response.json();
    const data = [{
      AddressLine2: "Hallgate Lane",
      AddressLine3: "Stalmine",
      BusinessName: "MCCOLLS",
      Geocode_Latitude: 53.901518,
      Geocode_Longitude: -2.953877,
      PostCode: "FY6 0LA",
      RatingValue: 5,
      _id: "5fc96b3a9c728ca91c564485",
    }];
    console.log(data);
    let la = data[0].Geocode_Latitude;
    let lo = data[0].Geocode_Longitude;
    let pot = {
      lat: la,
      lng: lo
    };
    let marker = new google.maps.Marker({
      position: pot,
      map: map
    })
    console.log(pot);
  }

  getTown();

}


let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 53.4808,
      lng: -2.2426
    },
    zoom: 7,
  });

  addMarker(pot);

  //add marker function
  function addMarker(coords) {
    var marker = new google.maps.Marker({
      position: coords,
      map: map,
      icon: 'pin.png'
    });
  }
}