Showing results for 
Search instead for 
Did you mean: 

Fabric is Generally Available. Browse Fabric Presentations. Work towards your Fabric certification with the Cloud Skills Challenge.

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

PBI November 2023 Update Carousel

Power BI Monthly Update - November 2023

Check out the November 2023 Power BI update to learn about new features.

Community News

Fabric Community News unified experience

Read the latest Fabric Community announcements, including updates on Power BI, Synapse, Data Factory and Data Activator.

Power BI Fabric Summit Carousel

The largest Power BI and Fabric virtual conference

130+ sessions, 130+ speakers, Product managers, MVPs, and experts. All about Power BI and Fabric. Attend online or watch the recordings.