Google Maps API does not always load until my page is refreshed

Question

I am having an intermittent issue where my Google Map will not load upon initially loading the webpage, causing a blank map. On refresh it will load without issue.

This is the error message I am getting in the Chrome console:

message: "initMap is not a function"
name: "InvalidValueError"

HTML for my map:

   <div class="container-fluid">
     <div id="map"> </div> 
   </div>

JavaScript:

function initMap() {
                var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
                var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 10,
                  center: uluru,
                  //disableDefaultUI: true,
                  gestureHandling: 'cooperative'

                });
                var marker = new google.maps.Marker({
                  position: uluru,
                  map: map
                });

                var triangleCoords = [
                    {lat: 28.0990114, lng: -82.0035785}, //Kathleen Rd - Lakeland 
                    {lat: 28.0186323, lng: -82.11286410000002}, //Plant City 
                    {lat: 27.8953038, lng: -81.97341719999997}, //Mulberry 
                    {lat: 27.8964147, lng: -81.84313739999999}, //Bartow 
                    {lat: 27.9014133, lng: -81.58590989999999},//Lake Wales 
                    {lat: 28.1141841, lng: -81.61785359999999}, //Haines City 
                    {lat: 28.1825147, lng: -81.8239676} //Polk City 
                  ];

                 var expressCoverage = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: '#333333',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#333333',
                    fillOpacity: 0.2
                  });
                  expressCoverage.setMap(map);

                }

I've cleared the cache in my browser with no effect on the issue. The problem persists in Chrome, Mozilla and Mobile Safari. Could something be happening with the API Key when the map is not loading?

Answer 1

Perhaps the 'InvalidValueError' is arising because you aren't declaring 'uluru' with the correct format. Coordinates in the Google Maps API need to be in LatLng form. Try replacing

var uluru = {lat: 28.0394654 , lng: -81.94980420000002};

with

var uluru = new google.maps.LatLng(28.0394654, -81.94980420000002);