inline javascript not being executed in angular routing template

Question

I have a problem : I am using angular.js and have implemented routing. This worked also well for me and displayed the html code in the templates. But I have the following problem: My template looks something like this:

<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 i can only see the two divs but not the map that should be created as well as the console output. And yes it works if I implement it in a "static" html page.

Thanks in advance

Answer 1

Solved it:

Just implemented jquery and the Gmaps api itself into the main page. I thought it is enough to link the google maps source in the javascript part on the template page