JavaScript Uncaught error: xxx is not a function
<p>This is a web application with Google maps API. I created a "find my location" button but when i click on it, it gives me this error saying "myLocation is not a function" I can't seem to find out why it's giving me this error.</p>

<pre><code>var mapDiv = document.getElementById('map');
var myLocation = document.querySelector('#my-location');
var map;
var pos;
var infowindow;
var search_place;

$.get( "http://ip-api.com/json", function(data) {
    pos = new google.maps.LatLng(data.lat, data.lon);
    initMap();
  });

function initMap() {
  map = new google.maps.Map(mapDiv, {
    zoom: 15,
    center: pos,
    mapTypeControl: false
  });

  // Marker for the user's current location on the map
  var curr_marker = new google.maps.Marker({
    position: pos,
    map: map,
    draggable: false,
   animation: google.maps.Animation.DROP
  });

  // Info window for nearby places
  infowindow = new google.maps.InfoWindow();

  //Search nearby restaurants and display them on the map
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: {lat: pos.lat(), lng: pos.lng()},
    radius: 1000,
    type: ['restaurant']
  }, callback);

  // Marker for the place searched by the user
  var search_marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP
  });

  // Auto complete for the search field
  var input = document.getElementById('pac-input');
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  // Display the place searched and put a marker and info window on that spot
  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    search_marker.setVisible(false);
    search_place = autocomplete.getPlace();
    if (!search_place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    } else {
      map.fitBounds(search_place.geometry.viewport);
      map.setCenter(search_place.geometry.location);
      map.setZoom(17);
    }
    // Custom marker icon
    // search_marker.setIcon(/** @type {google.maps.Icon} */({
    //   url: search_place.icon,
    //   size: new google.maps.Size(71, 71),
    //   origin: new google.maps.Point(0, 0),
    //   anchor: new google.maps.Point(17, 34),
    //   scaledSize: new google.maps.Size(35, 35)
    // }));
    search_marker.setPosition(search_place.geometry.location);
    search_marker.setVisible(true);

    var address = '';
    if (search_place.address_components) {
      address = [
        (search_place.address_components[0] &amp;&amp; search_place.address_components[0].short_name || ''),
        (search_place.address_components[1] &amp;&amp; search_place.address_components[1].short_name || ''),
        (search_place.address_components[2] &amp;&amp; search_place.address_components[2].short_name || '')
      ].join(' ');
    }

    search_marker.addListener('click', function() {
      slideLeft.open();
      infowindow.setContent('&lt;div&gt;&lt;strong&gt;' + search_place.name + '&lt;/strong&gt;&lt;br&gt;' + address);
      infowindow.open(map, search_marker);
    });
    infowindow.setContent('&lt;div&gt;&lt;strong&gt;' + search_place.name + '&lt;/strong&gt;&lt;br&gt;' + address);
    infowindow.open(map, search_marker);
  });

  // Info window of user's current location
  var youAreHere = '&lt;div id="content"&gt;'+
      '&lt;h3&gt;' + 'This is you!' + '&lt;/h3&gt;' +
      '&lt;/div&gt;';

  curr_marker.addListener('click', function() {
    infowindow.setContent(youAreHere);
    infowindow.open(map, curr_marker);
  });
  curr_marker.setMap(map);
  infowindow.setContent(youAreHere);
  infowindow.open(map, curr_marker);

  myLocation.addListener('click', function() {
    // infowindow.setPosition(pos);
    // infowindow.setContent(youAreHere);
    // map.setCenter(pos);
    window.alert("Locating...");
  });
}
</code></pre>

<p>This is the HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
            &lt;header class="header"&gt;
            &lt;nav class="header-nav"&gt;
                &lt;div id="hamburger-menu" class="slider"&gt;&lt;/div&gt;
                &lt;input id="pac-input" class="controls" type="text" placeholder="Search Maps"&gt;
                &lt;div id="my-location"&gt;&lt;i class="fa fa-location-arrow" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
            &lt;/nav&gt;
          &lt;/header&gt;&lt;!--header --&gt;
            &lt;main class="content"&gt;
            &lt;div class="container"&gt;
                &lt;div id="map"&gt;&lt;/div&gt;
            &lt;/div&gt;&lt;!-- container --&gt;
          &lt;/main&gt;&lt;!-- content --&gt;
         &lt;/div&gt;&lt;!-- wrapper --&gt;
</code></pre>