Uncaught TypeError: Cannot read properties of undefined (reading 'maps')-CodePudding

I'm trying to display map from google map on file html.twig, but this errors it displayed to me

Uncaught TypeError: Cannot read properties of undefined (reading 'maps')

my twig :

let map, google;
let markers = [];
var infowindow = new google.maps.InfoWindow();

function initMap() {
  const haightAshbury = {
    lat: 36.77355514795189,
    lng: 9.088027850665279
  };
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: haightAshbury,
    draggable: true

  });
  map.addListener("click", (event) => {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  deleteMarkers();
  const marker = new google.maps.Marker({
    position: location,
    map: map,
  });

<script src="https://maps.googleapis.com/maps/api/js?key={APIKeyHere}&callback=initMap&libraries=&v=weekly" async>
</script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

How can i solve it , and thanx

CodePudding user response：

You define a variable called google and never assign a value to it:

let map,google;

Which makes it undefined. You then try to read a value from that undefined variable:

var infowindow = new google.maps.InfoWindow();

Since the library you're importing already has a variable called google and you probably don't want to shadow that variable, remove it from your variable definition:

let map;

CodePudding user response：

Instead of let google, you can declare const google, or alternatively access this variable as (window as any).google.