JavaScript未知のエラー：xxxは関数ではありません

Question

これはGoogleマップAPIを使用したWebアプリケーションです。私は "私の場所を見つける"ボタンを作成しましたが、それをクリックすると "myLocationは関数ではありません"というエラーが表示されます。なぜ私にこのエラーが出ているのか分かりません。

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] && search_place.address_components[0].short_name || ''), 
     (search_place.address_components[1] && search_place.address_components[1].short_name || ''), 
     (search_place.address_components[2] && search_place.address_components[2].short_name || '') 
     ].join(' '); 
    } 

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

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

    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..."); 
    }); 
} 

これはHTMLです：

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

Answer 1

あなたはaddListenerは、特に地図のJavaScript APIオブジェクトのある、DOMノードのためaddEventListenerを使用する必要があります。

myLocation.addEventListener('click', function() { 
    // infowindow.setPosition(pos); 
    // infowindow.setContent(youAreHere); 
    // map.setCenter(pos); 
    window.alert("Locating..."); 
});