Menu
I want to add Bing Map V8 control to my Anguar 2.0 project. I want to know what I need to do to add Bing Map V8 into Angular 2.0 project. I have attached my implementation. The component I created couldn't be loaded. How do I reference Microsoft.Maps.Map?
Here is an example of the bing map v8. Everything works well if saving the following example as HTML. The bing map key was clipped.
<!DOCTYPE html>
<html>
<head>
<title>addOneLayerItemHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'My Bing Map Key - I removed here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
</body>
</html>Her is the file I created as map.component.html.
<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
</div>Here is the file I created as map.component.ts.
import { Component, OnInit } from 'angular2/core';
@Component({
selector: 'pm-map',
templateUrl: 'app/bingmap/map.component.html'
})
export class MapComponent implements OnInit {
public pageTitle: string = "Map";
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Bing Map Key - I removed it here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);
}
227
Sign in to the Bing Maps Dev Center with your Microsoft Account. Go to “My Account” and click on “My Keys.” Fill out the form and click “Create” and get your API key details.
The Bing Maps Routing API enables optimized travel times both for consumers and commercial applications with location intelligence features using historical data.
Since Bing Maps has free and paid versions, the main indication of use to focus on is billable transactions.
I initially tried the accepted answer and ran into the issue some people had in the comments where upon load 'prototype' was null.
I initially solved this by using a try/catch with a setTimeout in the catch that would attempt to load bing after a second. This worked but was a very sloppy solution.
Eventually I looked for how people loaded Google Maps in angular to see if there was a better solution. Thankfully there is and it uses promises.
The solution that worked for me was found here in this answer. Full credit for this goes to them.
First create a service to load your map...
map-loader-service.service
import { Injectable } from '@angular/core';
const url = 'http://www.bing.com/api/maps/mapcontrol?callback=__onBingLoaded&branch=release';
@Injectable()
export class BingMapsLoader {
private static promise;
public static load() {
// First time 'load' is called?
if (!BingMapsLoader.promise) {
// Make promise to load
BingMapsLoader.promise = new Promise( resolve => {
// Set callback for when bing maps is loaded.
window['__onBingLoaded'] = (ev) => {
resolve('Bing Maps API loaded');
};
const node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
node.async = true;
node.defer = true;
document.getElementsByTagName('head')[0].appendChild(node);
});
}
// Always return promise. When 'load' is called many times, the promise is already resolved.
return BingMapsLoader.promise;
}
}
In the parent component to the component that contains the bing map element have this code...
import { BingMapsLoader } from './services/map-loader-service/map-loader-service.service';
export class BingMapParentComponent {
mapReady = false;
constructor() {
BingMapsLoader.load()
.then(res => {
console.log('BingMapsLoader.load.then', res);
this.mapReady = true;
});
}
}
Additionally, in the template of parent component have this code which will prevent the bing maps component from being initialized until it is ready.
<app-bing-map *ngIf='mapReady'></app-bing-map>
Now, in the bing-map.component itself we want to wait until the component is in the DOM before loading the map.
ngOnInit() {
if (typeof Microsoft !== 'undefined') {
console.log('BingMapComponent.ngOnInit');
this.loadMap();
}
}
And finally, you load the bing map in the bing-map.component
loadMap() {
this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), {
credentials: 'Your Bing Maps Key Here',
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
