显示此页面的 Google 地图未正确加载 Google 地图

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.

Answer 1

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