locked
Bing Maps not showing up - Angular4 RRS feed

  • Question

  • hello,

    I am trying to get the bing maps to show in my sample application using Angular4 but for some reason it's not working. Attached are all the files. Specifically, I would assume the issue is with this block: 

        var map;
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'Bing Map Key - I removed it here'
        });

    component

    /// <reference path="../../node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
    
    import { Component, OnInit, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent implements OnInit {
      title = 'My App';
      @ViewChild('myMap') myMap;
      
      ngOnInit () {
    
      }
    
      ngAfterViewInit(){
        var map;
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'Bing Map Key - I removed it here'
        });
      }
      
    }
    
    component html
    <p>component works!</p>

    index

    <!DOCTYPE html>
    <html>
        <head>
            <title>My Sample App</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental' async defer></script>
            <script>
                System.import('app').catch(function(err){ console.error(err); });
            </script>
        </head>
        <body>        
            <app-root>Loading...
                <div id="myMap" style='width: 100%; height: 500px;'></div>`
    
    
            </app-root>  
        </body>
    </html>
    Currently, only the component html shows up. 

    • Moved by Duncan Lawler Monday, August 13, 2018 3:35 PM Wrong area
    Friday, August 10, 2018 9:28 PM

All replies

  • It seems like I got it to work but the map only populates when I use MS Edge Browser. Is there a reason and workaround for this?
    Saturday, August 11, 2018 12:22 AM
  • Hi jjjj190,

    I did a quick web search and found the following helpful post on StackOverflow: https://stackoverflow.com/questions/42934486/bing-maps-v8-not-working-with-ie-chrome-and-firefox

    Maybe that solution will work for you as well?

    Sincerely,

    IoTGirl

    Monday, August 13, 2018 4:01 PM
  • Hello,

    Unfortunately, I am trying to avoid using script tags in the HTML code, I have already accomplished everything that way but would like to accomplish it in a more angular way with the components and component.html which doesn't seem to be working out so well. I appreciate the links

    Tuesday, August 14, 2018 4:16 AM