Google map showing this page didn't load Google Maps correctly

Question

<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async="" defer="defer" type="text/javascript"></script>
var element = $(this);
     var map;
     function initialize(data) 
     {
      var myCenter = new google.maps.LatLng(null,null)
      
      var gmarkers = [];
      var polyline = [];
      
      var data1=JSON.parse(data);
      var noData="No Data Found";
      if(data1.last_call!='' && data1.last_call!=null) { $('#rep_call').text(data1.last_call); } else { $('#rep_call').text(noData); }
      if(data1.last_mail!='' && data1.last_mail!=null) { $('#rep_mail').text(data1.last_call); } else { $('#rep_mail').text(noData); }
      if(data1.last_sms!=''  && data1.last_sms!=null)  { $('#rep_sms').text(data1.last_sms);   } else { $('#rep_sms').text(noData);  }
      var locations = eval(data1.map_loc); 
      var mapProp = {center: myCenter,zoom: 10,draggable: true,scrollwheel: true,mapTypeId: google.maps.MapTypeId.ROADMAP,streetViewControl: false};
      map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);  
      
      var infowindow = new google.maps.InfoWindow();  
      
      var bounds = new google.maps.LatLngBounds(); 
      
      var iconURLgreen = '<?=base_url()?>images/green.png';
         var iconURLred = '<?=base_url()?>images/red.png';    
       
      for (i = 0; i < locations.length; i++) 
      {
       if(locations[i][3] == 0) { var iconURL = iconURLred;var openStatus = 'red';}    
       else { var iconURL = iconURLgreen;var openStatus = 'green';}
       
       var image = {url: iconURL,size: new google.maps.Size(29,38),origin: new google.maps.Point(0,0),anchor: new google.maps.Point(7,35)}    
             marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1], locations[i][2]),map: map,icon: image});
       polyline.push(new google.maps.LatLng(locations[i][1], locations[i][2]));
             gmarkers.push(marker); 
       bounds.extend(marker.position);

       google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
         //infowindow.setContent(locations[i][0]);
         //infowindow.open(map, marker);
        }
       })(marker, i));
       google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
       });      
         }
      
      map.fitBounds(bounds);
      
      var polyline = new google.maps.Polyline({
       path: polyline,
       strokeColor: "#337ab7",
       strokeOpacity: 1.0,
       strokeWeight: 10,
       map: map
      });
      
      polyline.setMap(map);
        }

I have tried this code, in YOUR_API_KEY place i have placed the actual api key still also it is showing some alert like This page didn't load Google Maps correctly. how to remove this alert. can anyone help me. any help could be appreciated.

check your console for more detail about the error. probably a wrong key — Ahmed Sunny, Mar 11 '20 at 12:05
it is showing like this DevTools failed to parse SourceMap: http://localhost/aldius/js/dist/jquery-migrate.min.map — Shwetha Shetty, Mar 11 '20 at 12:08
enable it in devtools settings, take a look [here](https://stackoverflow.com/a/36069603/2996989) — Ahmed Sunny, Mar 11 '20 at 12:21
Does this answer your question? [ESRI : Failed to parse source map](https://stackoverflow.com/questions/36051891/esri-failed-to-parse-source-map) — Ahmed Sunny, Mar 11 '20 at 12:21
This answer is not working the error in console was gone but the alert this page can't load google map correctly is still showing sir. — Shwetha Shetty, Mar 11 '20 at 12:53

score 0 · Answer 1 · answered Mar 22 '21 at 14:08

0

Make sure you are using correct API Key and open console to verify.

Might be possible miss this or any other option

You must enable Billing on the Google Cloud Project

answered Mar 22 '21 at 14:08

GMKHussain

3,342
1
21
19

Google map showing this page didn't load Google Maps correctly

1 Answers1