Google-Karten Fehler: Kann nicht lesen Eigenschaft '__e3_' von undefined

Question

Ich habe Probleme mit meinem Javascript-Code. Es hat früher funktioniert. Normalerweise, wenn ich auf meine a href in meiner Tabelle klicke, bekomme ich die Koordinaten der Klasse "coords" in einer meiner google maps (gmap_canvas). es funktioniert aus irgendeinem Grund nicht mehr. Vielleicht mache ich etwas falsch, aber ich weiß nicht was! Auch bekomme ich die Eigenschaft '__e3_' von undefined in meiner Konsole nicht lesen. Weiß jemand was das ist?

Hier finden Sie das HTML und das Javascript.

<div class="card"> 
<div class="header"> 
    <h4 class="title">SUEZbox</h4> 
</div> 
<div class="content table-responsive table-full-width"> 
    <table class="table table-hover table-striped"> 
     <thead> 
      <th>Box</th> 
      <th>User</th> 
      <th>Country</th> 
      <th>Location</th> 
      <th style="display: none">Coordinates</th> 
      <th>View</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td><b><?php echo $box['suezbox_naam']; ?></b></td> 
       <td> 
        <?php echo $box['user']; ?> 
       </td> 
       <td> 
        <?php echo $box['naam']; ?> 
       </td> 
       <td> 
        <?php echo $box['location']; ?> 
       </td> 
       <td class="coords" style="display: none"><?php echo $box['coordinates'];?></td> 
       <td><a href="javascript:void(0)">View Location On Map</a></td> 
      </tr> 

     </tbody> 
    </table> 
</div> 

die Javascript

<script type='text/javascript'> 
     var infowindow = new google.maps.InfoWindow(); 
     var markers = []; 

     function init_map() { 
      var myOptions = { 
       zoom: 14 
       , center: new google.maps.LatLng(50.934547, 4.412453) 
       , mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 

      $('table tr').each(function (idx, item) { 
       var coordsStr = $(this).find(".coords").html(); 
       console.log(coordsStr); 
       if (!coordsStr) return; 
       createMarker($(this)); 
      }); 
      $('.click').click(function (evt) { 
       var coordsStr = $(this).parents().find(".coords").html(); 
       console.log(coordsStr); 
       coords = coordsStr.split(","); 
       var point = new google.maps.LatLng(coords[0], coords[1]); 
       map.setCenter(point); 
       google.maps.event.trigger(markers[coordsStr], 'click'); 
      }); 
      google.maps.event.trigger(markers["52.939347, 4.754741"], 'click') 
     } 

     function createMarker(jqe) { 
      var coordsStr = $(jqe).find(".coords").html(); 
      console.log(coordsStr); 
      coords = coordsStr.split(","); 
      var point = new google.maps.LatLng(coords[0], coords[1]); 
      var marker = new google.maps.Marker({ 
       map: map 
       , position: point 
      }); 
      var content = jqe.find("td").eq(0).html(); + '<br>' 
      var content1 = '<strong></strong><br>' + jqe.find("td").eq(2).html(); + '<br>' 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(content + content1); 
       infowindow.open(map, marker); 
      }); 
      markers[coordsStr] = marker; 
     } 
     google.maps.event.addDomListener(window, 'load', init_map); 
    </script> 

Answer 1

Syntaxfehler:

var myOptions = { 
       zoom: 14 
       , center: new google.maps.LatLng(50.934547, 4.412453) 
       , mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 

      $('table tr').each(function (idx, item) { 
       var coordsStr = $(this).find(".coords").html(); 
       console.log(coordsStr); 
       if (!coordsStr) return; 
       createMarker($(this)); 
      }); 
      $('a').click(function (evt) { 
       var coordsStr = $(this).parents().find(".coords").html(); 
       console.log(coordsStr); 
       coords = coordsStr.split(","); 
       var point = new google.maps.LatLng(coords[0], coords[1]); 
       map.setCenter(point); 
       google.maps.event.trigger(markers[coordsStr], 'click'); 
      }); 
      google.maps.event.trigger(markers["52.939347, 4.754741"], 'click'); 


     function createMarker(jqe) { 
      var coordsStr = $(jqe).find(".coords").html(); 
      console.log(coordsStr); 
      coords = coordsStr.split(","); 
      var point = new google.maps.LatLng(coords[0], coords[1]); 
      var marker = new google.maps.Marker({ 
       map: map 
       , position: point 
      }); 
      var content = jqe.find("td").eq(0).html(); + '<br>' 
      var content1 = '<strong></strong><br>' + jqe.find("td").eq(2).html(); + '<br>' 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(content + content1); 
       infowindow.open(map, marker); 
      }); 
      markers[coordsStr] = marker; 
     } 
     google.maps.event.addDomListener(window, 'load', init_map); 

Answer 2

Ich habe den Fehler "Nicht abgefangene Typeerror: kann Eigenschaft '_e3' undefinierter gelesen" gesehen mehrmals. Normalerweise war es ein Versuch, Ereignis-Listener auf den nicht vorhandenen DOM-Elementen zu setzen.

Ich würde vorschlagen, zu überprüfen, ob das Element existiert, bevor Sie versuchen, den Klick darauf auszulösen. Etwas wie:

if(markers["52.939347, 4.754741"]) { google.maps.event.trigger(markers["52.939347, 4.754741"], 'click'); }