google maps api 3 - How can I integrate scripts to Angular 4 component? -


i following documentation on google map api services (https://developers.google.com/maps/documentation/javascript/marker-clustering) .i want use show map clusters in app component angular component not support importing external scripts. if import scripts unable change content of scripts (for example change var locations..) . how can import , maintain scripts in component.ts file. when copy pasting scripts directly component.ts errors occur such variables not declared since declared in external script file. please not recommend me agm angular maps since not support map clusters. please me solve problem.

<script>        function initmap() {          var map = new google.maps.map(document.getelementbyid('map'), {           zoom: 3,           center: {lat: -28.024, lng: 140.887}         });          // create array of alphabetical characters used label markers.         var labels = 'abcdefghijklmnopqrstuvwxyz';          // add markers map.         // note: code uses javascript array.prototype.map() method         // create array of markers based on given "locations" array.         // map() method here has nothing google maps api.         var markers = locations.map(function(location, i) {           return new google.maps.marker({             position: location,             label: labels[i % labels.length]           });         });          // add marker clusterer manage markers.         var markercluster = new markerclusterer(map, markers,             {imagepath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});       }       var locations = [         {lat: -31.563910, lng: 147.154312},         {lat: -33.718234, lng: 150.363181},         {lat: -33.727111, lng: 150.371124},         {lat: -33.848588, lng: 151.209834},         {lat: -33.851702, lng: 151.216968},         {lat: -34.671264, lng: 150.863657},         {lat: -35.304724, lng: 148.662905},         {lat: -36.817685, lng: 175.699196},         {lat: -36.828611, lng: 175.790222},         {lat: -37.750000, lng: 145.116667},         {lat: -37.759859, lng: 145.128708},         {lat: -37.765015, lng: 145.133858},         {lat: -37.770104, lng: 145.143299},         {lat: -37.773700, lng: 145.145187},         {lat: -37.774785, lng: 145.137978},         {lat: -37.819616, lng: 144.968119},         {lat: -38.330766, lng: 144.695692},         {lat: -39.927193, lng: 175.053218},         {lat: -41.330162, lng: 174.865694},         {lat: -42.734358, lng: 147.439506},         {lat: -42.734358, lng: 147.501315},         {lat: -42.735258, lng: 147.438000},         {lat: -43.999792, lng: 170.463352}       ]     </script>     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">     </script>     <script async defer     src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initmap">     </script> 

angular supports importing external scripts .have @ thread. load external js script dynamically in angular 2


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -