Simple Map

by designworksinteractive

HTML

<section>
  <div class="container">
    <h2>Choose your tour:</h2>
    <div class="container" id="selectTour">
      <div class="form-check-inline">
        <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" id="one">Gaudi Tour
                    </label>
      </div>
      <div class="form-check-inline">
        <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" id="two">Gothic Tour
                    </label>
      </div>
    </div>
    <div class="container">
      <button onclick="updateMarkers();">Show on Map</button>
    </div>

    <!--The Map-->
    <div class="container">
      <div id="map"></div>
    </div>
  </div>
</section>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2VZvngp-Tff39y4oBI3Ox7jytqDEQoNs&libraries=geometry,places&ext=.js" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 400px;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
var markers = [];
//---------------------Data of Locations-----------------
//---------------------Initializing Map-----------------

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(41.3851, 2.1734),
    zoom: 12
  };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
//---------------------Markers-----------------
function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    icon: props.iconImage
  });

  //checking for icon
  if (props.iconImage) {
    marker.setIcon(props.iconImage);
  }

  //checking for infowindow 
  if (props.content) {
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
}

function updateMarkers() {
  createMarkers();
  for (var i = 0; i < locations.length; i++) {
    addMarker(locations[i]);
  }
}

//---------------------Select Tour-----------------

function createMarkers() {
  let selectedLocations = locations.filter(function(obj) {
    var selectedTour = document.getElementById("selectTour").value;
    return obj.tour === selectedTour;
  });

  let resultlist = [];


  if (document.getElementById("one").checked) {
    let one = selectedLocations.filter(function(obj) {
      return obj.name === 'one';
    });
    resultlist = resultlist.concat(one);
  }

  if (document.getElementById("two").checked) {
    let two = selectedLocations.filter(function(obj) {
      return obj.name === 'two';
    });
    resultlist = resultlist.concat(two);
  }

  for (var i = 0; i < resultlist.length;) {
    markers.push({
      coords: {
        lat: resultlist[i].lat,
        lng: resultlist[i].lng
      },
      content: resultlist[i].name
    });
  }
}
let locations = [{
    name: 'one',
    tour: 'gaudi',
    coords: {
      lat: 41.403706,
      lng: 2.173504
    },
    content: 'google',
  },
  {
    name:...