web-dev-qa-db-fra.com

Uncaught InvalidValueError: initMap n'est pas une fonction

J'essaie de charger une carte Google avec des paramètres spécifiques. Je comprends que le problème est probablement que la fonction initMap doit être déclarée globalement. Cependant, je ne sais pas comment, même après avoir recherché plusieurs publications de StackOverflow présentant des problèmes similaires.

Le reste

 <script>
 var databaseArray = [{id: 'BTS1', arfcn: '70', bsic: '29'}
,{id: 'BTS2', arfcn: '60', bsic: '28'}
,{id: 'BTS3', arfcn: '65', bsic: '27'}
,{id: 'BTS4', arfcn: '55', bsic: '26'}
,{id: 'BTS5', arfcn: '75', bsic: '29'}];

var locationArray = [{lat: '60.78064', lng: '10.67037'}
,{lat: '60.76978', lng: '10.66677'}
,{lat: '60.76991', lng: '10.69672'}
,{lat: '60.78889', lng: '10.68462'}
,{lat: '60.76086', lng: '10.65141'}];


function displayDatabase(){
  var table1 = document.getElementById('database');
  for (var i = 0; i < databaseArray.length; i++){
      var bts = databaseArray[i];
      var row = document.createElement('tr');
      var properties = ['id', 'arfcn', 'bsic'];

      for(var j = 0; j < properties.length; j++){
          var cell = document.createElement('td');
          cell.innerHTML = bts[properties[j]];
          row.appendChild(cell);
      }
      table1.appendChild(row);
  }
 }

function displayLocations(){
   var table2 = document.getElementById('location');
   for (var i = 0; i < locationArray.length; i++){
      var location = locationArray[i];
      var row = document.createElement('tr');
      var properties = ['lat', 'lng'];

      for(var j = 0; j < properties.length; j++){
         var cell = document.createElement('td');
         cell.innerHTML = location[properties[j]];
         row.appendChild(cell);
       }
       table2.appendChild(row);
   }
}
</script>
 <body>
   <div id="container">

     <div id="map"></div>

     <div id="info">
       <p>Her skal det så informasjon om cellen.</p>
     </div>
  </div>  

<script>
displayDatabase();
displayLocations();
</script>
<script>

    var map;
    var bts = databaseArray[0];
    var loc = locationArray[0];
    var id1 = bts.id;
    var arfcn1 = bts.arfcn;
    var bsic1 = bts.bsic;
    var latitude = loc.lat;
    var longditude = loc.lng;

    window.initMap = function() {

      var MS = {lat: latitude, lng: longditude};
      var radius = 500;
      if(TA != 0){
          radius = radius * (TA+1);
      }

        var BTS1 = {lat: 60.78064, lng: 10.67037};
        var BTS2 = {lat: 60.76978, lng: 10.66677};
        var BTS3 = {lat: 60.76991, lng: 10.69672};
        var BTS4 = {lat: 60.78889, lng: 10.68462};
        var BTS5 = {lat: 60.76086, lng: 10.65141};
        var BTS8 = {lat: 60.79652, lng: 10.66857};


        var mapOptions = {
            zoom: 13,
            center: BTS1
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var image = 'tower1.png';
        var spyware = 'spyware.png';

      var circle = new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000'
          fillOpacity: 0.35,
          map: map,
          center: MS,
          radius: radius
        });

        var marker1 = new google.maps.Marker({
            position: BTS1,
            map: map,
            title: 'BTS: 1',
            icon: image
        });

        var marker2 = new google.maps.Marker({
            position: BTS2,
            map: map,
            title: 'BTS: 2',
            icon: image
        });

        var marker3 = new google.maps.Marker({
            position: BTS3,
            map: map,
            title: 'BTS: 3',
            icon: image
        });

        var marker4 = new google.maps.Marker({
            position: BTS4,
            map: map,
            title: 'BTS: 4',
            icon: image
        });

        var marker5 = new google.maps.Marker({
            position: BTS5,
            map: map,
            title: 'BTS: 5',
            icon: image
        });



        var infowindow1 = new google.maps.InfoWindow({
              content: "<B>BTS: 1 <br> ARFCN: 70 <br> BSIC: 29</B> " //BCC 5
          });
        var infowindow2 = new google.maps.InfoWindow({
              content: "<B>BTS: 2 <br> ARFCN: 60 <br> BSIC: 28</B> " //BCC 4
          });
        var infowindow3 = new google.maps.InfoWindow({
              content: "<B>BTS: 3 <br> ARFCN: 65 <br> BSIC: 27</B> " //BCC 3
          });
        var infowindow4 = new google.maps.InfoWindow({
              content: "<B>BTS: 4 <br> ARFCN: 55 <br> BSIC: 26</B> " //BCC 2
          });

        var infowindow5 = new google.maps.InfoWindow({
              content: "<B>BTS: 5 <br> ARFCN: 75 <br> BSIC: 29</B> " //BCC 3
          });

           //=====Eventlistener for InfoWindow
          google.maps.event.addListener(marker1, 'click', function() {
            infowindow1.open(map,marker1);
          });

          google.maps.event.addListener(marker2, 'click', function() {
                infowindow2.open(map,marker2);
              });

          google.maps.event.addListener(marker3, 'click', function() {
                infowindow3.open(map,marker3);
              });

          google.maps.event.addListener(marker4, 'click', function() {
                infowindow4.open(map,marker4);
              });

          google.maps.event.addListener(marker5, 'click', function() {
                infowindow5.open(map,marker5);
              });             

    }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API-key&callback=initMap"
  async defer></script>
</body>
</html>

Je vous remercie!

javascriptgoogle-maps
3
Test327732 Test326632

J'ai copié votre code mais il y a une erreur de syntaxe. Donc je ne peux pas tester. Mais votre erreur est à propos de initMap (bien sûr :)). Supprimez tout le code et vérifiez initMap et votre window.initMap. 

function initMap() {alert("ok");}

Est-ce que google callback fonctionne?

7
a.u.b

Je l'ai trouvé ... Bien que très tard pour la fête ...

Si vous avez téléchargé le code js de Google Maps à partir de ce lien https://maps.googleapis.com/maps/api/js , puis que vous avez essayé de l'appeler à l'aide de 

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Il y a un bug dans les outils de développement qui modifie le code.

Recherchez la initMap dans le fichier téléchargé et remplacez le fichier entier par "" . Ou remplacez le lien ci-dessus par une nouvelle copie, puis verrouillez le fichier ou marquez-le comme ReadOnly pour éviter qu'il ne se reproduise.

4
jeet.chanchawat

Pas un meilleur moyen mais cela a résolu mon problème.

Appelez initMap () manuellement comme solution de secours si jamais la fonction de rappel ne fonctionne pas. 

jQuery(document).ready(function($) {
    initMap();
});

J'espère que cela t'aides.

0
reylimjr