0

I have done a more complex code which says the above so I simplified this to make it just a code that loads a map with a marker and still get the initmap is not a function.

Can someone help please.

Code

<!DOCTYPE html>
<html>
  <head>
    <title>Map Example</title>
    <style>
      /* Set map height to fill screen */
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <!-- Map container -->
    <div id="map"></div>
 
        <script>function initMap() {
        const bayTopsoilLocation = { lat: -37.75225813338976, lng: 176.0933796158968 };

        // Create map centered on Bay topsoil location
        const map = new google.maps.Map(document.getElementById("map"), {
          center: bayTopsoilLocation,
          zoom: 12,
        });

        // Create marker at Bay topsoil location
        const marker = new google.maps.Marker({
          position: bayTopsoilLocation,
          map: map,
          title: "Bay Topsoil",
        });
      }
    </script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"></script>
   
  </body>
</html>

tried moving script to the bottom,tried inserted

not sure what else to do. Any help appreciated.

naylin-59
  • 1
  • [How to make a callback to Google Maps init in separate files of a web app](https://stackoverflow.com/questions/38627259/how-to-make-a-callback-to-google-maps-init-in-separate-files-of-a-web-app) may be you want to take a look at this – Khairani F May 12 '23 at 01:54

0 Answers0