Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
Hi,
I am new to making custom visuals in PowerBI and am trying to make a simple visual which simply displays Google Maps.
I am currently just trying to get the basic map to initialise on the visual, without specifying any location with data just yet - however, despite being able to successfully run pbiviz start and load this up on PBI Service, all I am able to produce is a blank visual.
What am I missing to get the map to display? I am currently using the basic map API example given by Google here:
This is the code from my visual.ts (though I have censored my API key) - I'm not seeing any errors either in vscode or in Powershell when doing pbiviz start, but all I get in PowerBI service is a blank visual. How do I just get the basic map showing?
"use strict";
import powerbi from "powerbi-visuals-api";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import "./../style/visual.less";
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any,any, any>;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import { VisualFormattingSettingsModel } from "./settings";
import DataView = powerbi.DataView;
import DataViewTable = powerbi.DataViewTable;
import DataViewTableRow = powerbi.DataViewTableRow;
import DataViewMetadataColumn = powerbi.DataViewMetadataColumn;
import DataViewcolumn = powerbi.DataView
export class Visual implements IVisual {
private target: HTMLElement;
private textNode: Text;
private formattingSettings: VisualFormattingSettingsModel;
private formattingSettingsService: FormattingSettingsService;
private map: google.maps.Map;
private div: d3.Selection<SVGElement,any,any,any>;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options); //standard
this.formattingSettingsService = new FormattingSettingsService(); //standard
this.target = options.element; //standard
let script = document.createElement('script');
script.type = 'text/javascript'
script.src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initMap";
document.body.appendChild(script);
d3.select(options.element)
.append('div');
}
public update(options: VisualUpdateOptions) {
this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews);
let map: google.maps.Map;
function initMap(): void {
const google = window['google'] || window.window['google'];
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
}
public getFormattingModel(): powerbi.visuals.FormattingModel {
return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
}
}
Any help would be greatly appreciated!
As an update, I have attempted to use the solutions given in an old thread which appends options.element directly with Javascript:
constructor(options: VisualConstructorOptions) {
let mapDiv = document.createElement('div');
mapDiv.id = 'map';
mapDiv.style.height = "550px";
options.element.appendChild(mapDiv);
let js = document.createElement('script');
js.innerHTML = "var map;"
+ "function initMap() {"
+ "map = new google.maps.Map(document.getElementById('map'), {"
+ "center: {lat: -34.397, lng: 150.644},"
+ "zoom: 8"
+ "});"
+ "}"
+ "initMap()";
options.element.appendChild(js);
js = document.createElement('script');
js.src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly";
options.element.appendChild(js);
}
(Thread found here: https://community.powerbi.com/t5/Developer/Use-Google-Map-API-in-custom-visual/td-p/190346)
However, I don't know if this is an issue with PowerBI Visual API being updated since then or an error with my code, but this still gives a blank visual. I have even inspected the code for the visual div element on PowerBI service and can see that the script for the Google Maps API is running - but there still is no output other than a blank window.
I have tested the same code on a blank HTML page, which displays the map easily enough but it refuses to work on this PowerBI visual - am I missing something?
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.
User | Count |
---|---|
9 | |
6 | |
2 | |
2 | |
2 |
User | Count |
---|---|
4 | |
4 | |
4 | |
4 | |
4 |