Using Google Maps API to display a map in custom visual

burgerboyy — Thu, 19 Jan 2023 16:26:23 GMT

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:

https://developers.google.com/maps/documentation/javascript/examples/map-simple#maps_map_simple-typescript

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!

Re: Using Google Maps API to display a map in custom visual

burgerboyy — Fri, 20 Jan 2023 11:48:15 GMT

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'); 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?

topic Re: Using Google Maps API to display a map in custom visual in Developer

Using Google Maps API to display a map in custom visual

Re: Using Google Maps API to display a map in custom visual