Как встроить Google Maps в поле на Odoo через новый виджет?

Question

Я новичок в Odoo, и я учусь создавать новый виджет, в первый раз я хочу встроить экран Google Maps с моей формой. Для начала я создал две группы внутри <record><form>, в первой группе я показал некоторые данные (это нормально), а во второй группе я хочу показать экран Google Maps (это проблема). Я создал модуль с именем vz.visit.

1. Первая попытка

Создать google_maps_widget.js, teste.xml и google_maps_widget.xml.

views.xml

<record model="ir.ui.view" id="vz_visit_create_form_view_2">
  <field name="name">vz.visit.form</field>
  <field name="model">vz.visit</field>
  <field name="arch" type="xml">
    <form string="Registro de Visita">
      <sheet>
        <group>

          <!-- DATA GROUP: It's OK -->
          <group>
            <field name="name" readonly="1"/>
            <field name="partner_id"/>
            <field name="description"/>
            <field name="date_start"/>
            <field name="date_end"/>
            <field name="duration"/>
            <field name="location"/>
          </group>

          <!-- MAP GROUP: Not works -->
          <group>
            <field name="google_map_partner" widget="vz_google_map" nolabel="1"/>
          </group>

        </group>
      </sheet>
    </form>
  </field>
</record>

google_maps_widget.js

odoo.define('vz_visit.FieldMap', function(require) {
"use strict";

var core = require('web.core');
var form_common = require('web.form_common');

var FieldMap = form_common.AbstractField.extend({
    template: 'FieldMap',
    start: function() {
        var self = this;

        this.map = new google.maps.Map(this.el, {
            center: {lat:-26.22947, lng:-52.671561},
            zoom: 10,
            disableDefaultUI: false,
        });
    }
});

core.form_widget_registry.add('vz_google_map',FieldMap);

return {
    FieldMap : FieldMap,
};

});

google_maps_widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="FieldMap">
        <div class="vz_gmap"></div>
    </t>
</templates>

teste.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/vz_visit/static/src/js/google_maps_widget.js"/>
            </xpath>
        </template>
    </data>
</odoo>

Результат: страница не загружена и отображаются ошибки.

Ошибка:

• Диалог: ReferenceError: Google is not defined.
• Консоль: ReferenceError: Google is not defined.

2. Вторая попытка

Идея: использование функции обратного вызова для загрузки карт Google в сценарии src. Редактируем следующие два файла:

teste.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/vz_visit/static/src/js/google_maps_widget.js"/>
                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&callback=initMap"/>
            </xpath>
        </template>
    </data>
</odoo>

google_maps_widget.js

odoo.define('vz_visit.FieldMap', function(require) {
"use strict";

var core = require('web.core');
var form_common = require('web.form_common');

var FieldMap = form_common.AbstractField.extend({
    template: 'FieldMap',
    start: function() {
        var self = this;

        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('vz_google_map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 10
            }
        );
      }
    }
});

core.form_widget_registry.add('vz_google_map',FieldMap);

return {
    FieldMap : FieldMap,
};

});

Результат: страница загружена, но карта не отображается.

Ошибка:

• Консоль: Could not get content for https://maps.googleapis.com/maps/api/js?key=API_KEY defined in bundle web.assets_beckend