JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<input id="address" value="London, UK" />
<input id="submit" type="button" value="submit" />
<input id="distance" value="10" />
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

google.maps.event.addDomListener(window, "load", initMap);
//Array of all map markers
var markers = [];
var mxTracks = [
  ["Brighton, UK", 0, 50.82253000000001, -0.13716299999998682],
  ["Cambridge, UK", 1, 52.205337, 0.12181699999996454]
];
// Loading Map
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 54.188,
      lng: -2.878
    },
    zoom: 6
  });

  //Creating a Geocoder object
  var geocoder = new google.maps.Geocoder();

  //Calling a 
  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });

  //Geocoding function
  function geocodeAddress(geocoder, resultsMap) {
    //Removing all markers form the map each time this function is called  
    console.log(markers.length);
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
      // 
      console.log(markers.length);
    }
    markers = [];
    var address = document.getElementById('address').value;
    var distance = document.getElementById('distance').value;
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status === 'OK') {
        resultsMap.setCenter(results[0].geometry.location);
        var userMarker = new google.maps.Marker({
          map: resultsMap,
          position: results[0].geometry.location,
          // icon: 'img/bluedot.png'
        });
        markers.push(userMarker);
        //Creating track markers
        for (var i = 0; i < mxTracks.length; i++) {
          var trackMarker = new google.maps.Marker({
            position: new google.maps.LatLng(mxTracks[i][2], mxTracks[i][3])
          });
          markers.push(trackMarker);
          //If markers are within a set distance add them to a map
          if (google.maps.geometry.spherical.computeDistanceBetween(userMarker.getPosition(), trackMarker.getPosition()) < parseInt(distance) * 1609.34) {
            trackMarker.setMap(resultsMap);
 ...