google maps Cannot read property 'maps' of undefined

Question

i trying to display markers according to user location and i keep getting this error that as commenas it is i didnt find any solution that match my problem, thae error i'm getiing is : Uncaught TypeError: Cannot read property 'maps' of undefined & its referring to this :at Array.filter (native) . thanks:

  <script src="https://maps.googleapis.com/maps/api/js?key="My_Api_Key"&libraries=geometry"></script>
<script>
    "use strict";
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {

                var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
                var currentLatitude = position.coords.latitude;
                var currentLongitude = position.coords.longitude;
                var userLatLng = currentLatitude + currentLongitude;
                var markersFiltered = markers.filter(function(markers, index, array, google) {
                var myLatlng = new window.google.maps.LatLng(markers.Latitude, markers.Longitude);

                    return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000;
                });
                window.onload = function(a) {
                    var mapOptions = {
                        center: new window.google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),

                        zoom: 8,
                        mapTypeId: window.google.maps.MapTypeId.ROADMAP
                    };

                    var infoWindow = new window.google.maps.InfoWindow();
                    var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);

                    for (var i = 0; i < markersFiltered.length; i++) {
                        var data = markers[i];
                        var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude);
                        var marker = new window.google.maps.Marker({
                            position: myLatlng,
                            draggable: true,
                            animation: google.maps.Animation.DROP,
                            get map() { return map; }
                        });
                        (function(marker, data) {
                            window.google.maps.event.addListener(marker,
                                "click",
                                function(e) {
                                    infoWindow.setContent(data.Venue + " " + data.Genre.Name);
                                    infoWindow.open(map, marker);
                                });
                        })(marker, data);
                    }

                };
            });
    };
</script>

https://jsfiddle.net/1gm0u4wd/9/

Solution

Your html will be as below. Your maps api javascript will be linked inside html section not javascript section.

<div id="map" style="width: 500px; height: 500px"/>

<script src="https://maps.googleapis.com/maps/api/js?key=yourMapsAPIKey&libraries=geometry"></script>

Note : "yourMapsAPIKey" should be your API key. You can get your maps api key from here.

Update your script as below

"use strict";
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      var currentLatitude = position.coords.latitude;
      var currentLongitude = position.coords.longitude;
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: new google.maps.LatLng(currentLatitude, currentLongitude),
      });

      //your dynamic markers
      var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs));

      //default marker at current location
      //var markers = new google.maps.Marker({
      //position: new google.maps.LatLng(currentLatitude, currentLongitude),
      //map: map,
      //title: 'Hello World!'
      //});

       var userLatLng = new window.google.maps.LatLng(currentLatitude, currentLongitude);

      //your filter function
      var markersFiltered = markers.filter(function(markers, index, array, google) {
        var myLatlng = new window.google.maps.LatLng(markers.Latitude, markers.Longitude);
        return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000;
      });

      window.onload = function(a) {
        var mapOptions = {
          center: new window.google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
          zoom: 8,
          mapTypeId: window.google.maps.MapTypeId.ROADMAP
        };

        var infoWindow = new window.google.maps.InfoWindow();
        var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);

        for (var i = 0; i < markersFiltered.length; i++) {
          var data = markers[i];
          var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude);
          var marker = new window.google.maps.Marker({
            position: myLatlng,
            draggable: true,
            animation: google.maps.Animation.DROP,
            get map() {
              return map;
            }
          });
          (function(marker, data) {
            window.google.maps.event.addListener(marker,
              "click",
              function(e) {
                infoWindow.setContent(data.Venue + " " + data.Genre.Name);
                infoWindow.open(map, marker);
              });
          })(marker, data);
        }

      };
    });
}; 

Fiddle here