SimpleMaps

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  <input id="FINDPOS" value="FINDPOS" type="button" /><div id="output"></div>
    <div id="map"></div>
  </body>
</html>

CSS

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

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

JavaScript

jQuery(document).ready(function() {
  // Create the script tag, set the appropriate attributes

  let script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=places&libraries=geometry';
  script.defer = true;
  var map
  let infowindow

  window.initMap = function() {
   
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const center = {
      lat: -36.561551,
      lng: -72.0954877
    }
    infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: center
    });
    let markers = setMarkers(map)
    directionsRenderer.setMap(map);
    getDirections(markers, directionsRenderer)

  }
  const locations = [
    ['Super Pellet Santiago', -33.458717664930084, -70.77513497336462],
    ['Super Pellet Chillan', -36.561551, -72.0954877],
    ['Super Pellet Concepción', -36.8158124, -73.0741686],
    ['Super Pellet Los Angeles', -37.4774907, -72.3245759],
    ['Super Pellet Angol', -33.80010128657071, 151.28747820854187],
    ['Super Pellet Temuco', -38.7702088, -72.6301967]
  ];

  function setMarkers(map) {
    let markers = []
    for (let i = 0; i < locations.length; i++) {
      markers[i] = new google.maps.Marker({
        title: locations[i][0],
        position: {
          lat: locations[i][1],
          lng: locations[i][2]
        },
        map: map
      });
      google.maps.event.addListener(markers, 'click', (function(markers, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, markers);
        }
      })(markers, i));

    }
    return markers
    // Append the 'script' element to 'head'
  }
  document.head.appendChild(script);

  function getDirections(markers, directionsRenderer) {
    let userLocation = {
      lat: -32.8894587,
      lng: -68.8458386
    }; // Mendoza, Capital...