Showing results for 
Search instead for 
Did you mean: 
New Member

Using Google Maps API to display a map in custom visual



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 = options.element; //standard
        let script = document.createElement('script');
        script.type = 'text/javascript'


    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!

New Member

As an update, I have attempted to use the solutions given in an old thread which appends options.element directly with Javascript&colon;


   constructor(options: VisualConstructorOptions) {
        let mapDiv = document.createElement('div'); = 'map'; = "550px";
        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()";
        js = document.createElement('script');

 (Thread found here:


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?



Helpful resources

Winner of T-Shirt Design

Power BI T-Shirt Design Challenge 2023

Find out who won the T-Shirt Design Challenge and the top 3 finalists.

March 2023 Update3

Power BI March 2023 Update

Find out more about the March 2023 update.