Inline Javascript wird nicht ausgeführt in angular Routing-Vorlage

Question

Ich habe ein Problem: Ich benutze angular.js und Routing implementiert haben. Das funktionierte auch gut für mich und zeigte den HTML-Code in den Vorlagen an. Aber ich habe folgendes Problem: Meine Vorlage sieht ungefähr so ​​aus:

<div id="map_canvas" style="width:95%; height:800px; margin-top:5%; "></div> 
     <div id="legend"><h3>Legend</h3></div>  
<script type="text/javascript"> 
      console.log('Hi'); 
      function initialize() { 

       var mapOptions = { 
        zoom: 13, 
        center: new google.maps.LatLng(48.209500, 16.370691), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 



       //Markers 


       var lat_cat0; 
       var long_cat0; 
       var markerContent =""; 
       var iconNames = ["NotAvailable", "VeryBad", "Bad", "Medium", "Good", "VeryGood"]; 
       for (i = 0; i < 6; i++) { 
        $(document).ready(function() { 

         $.getJSON("../../../Data/JSONs/randomdata_cat"+i+".json", function (result) { 
          $.each(result, function (i, field) { 
           markerContent = "Date: " + field.Timestamp + " - Downstream: " + field.Upstream.toFixed(2) + " Mbit/s - Upstream: " + field.Downstream.toFixed(2) + " Mbit/s"; 
           var infowindow = new google.maps.InfoWindow({ 
            content: markerContent 
           }); 

           var marker = new google.maps.Marker({ 
            position: new google.maps.LatLng(field.Long, field.Lat), 
            animation: google.maps.Animation.Bounce, 
            map: map, 
            icon: 'images/Speed_'+iconNames[i]+'.png' 
           }); 
           marker.addListener('click', function() { 
            infowindow.open(map, marker); 
           }); 


          }); 
         }); 

        }); 
       } 


       //Legend 

       var icons = { 
        notAvailable: { 
         name: 'notAvailable', 
         icon: 'images/Speed_NotAvailable.png' 
        }, 
        verybad: { 
         name: 'verybad', 
         icon: 'images/Speed_VeryBad.png' 
        }, 
        bad: { 
         name: 'bad', 
         icon: 'images/Speed_Bad.png' 
        }, 
        medium: { 
         name: 'medium', 
         icon: 'images/Speed_Medium.png' 
        }, 
        good: { 
         name: 'good', 
         icon: 'images/Speed_Good.png' 
        }, 
        verygood: { 
         name: 'verygood', 
         icon: 'images/Speed_VeryGood.png' 
        } 
       }; 


       var legend = document.getElementById('legend'); 
       for (var key in icons) { 
        var type = icons[key]; 
        var name = type.name; 
        var icon = type.icon; 
        var div = document.createElement('div'); 
        div.innerHTML = '<img src="' + icon + '"> ' + name; 
        legend.appendChild(div); 
       } 



       map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); 


      } 

      function loadScript() { 
       var script = document.createElement("script"); 
       script.type = "text/javascript"; 
       script.src = "http://maps.googleapis.com/maps/api/js?key=fds&sensor=true&callback=initialize"; 
       document.body.appendChild(script); 

      } 



      window.onload = loadScript; 

     </script> 

So kann ich nur sehen die beiden divs aber nicht die Karte, die ebenso wie die Konsolenausgabe erstellt werden soll. Und ja, es funktioniert, wenn ich es in einer "statischen" HTML-Seite implementieren.

Vielen Dank im Voraus

Answer 1

es gelöst:

einfach implementiert jquery und die Gmaps api sich in der Hauptseite. Ich dachte, es ist genug, um die Google Maps Quelle im JavaScript-Teil auf der Vorlage Seite