odoo widget

gmap.js

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

    var Widget = require("web.Widget");
    var widgetRegistry = require("web.widget_registry");
    var ajax = require('web.ajax');

    var setGoogleMap = () => {
        var script = document.createElement("script");
        script.id = "gmap_script";
        script.defer = true;
        script.src = "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_KEY&callback=initMap";
        document.head.appendChild(script);
    }

    var icon = `${location.origin}/smart_light/static/src/img/_icon.png`;


    const initControllerGoogleMap = (draggable, lat, lng, div_map) => {
        window.initMap = () => {
            var map = new google.maps.Map(div_map, {
                minZoom: 2,
                zoom: 2,
                center: {lat: lat, lng: lng}
            });

            var marker = new google.maps.Marker({
                map: map,
                draggable: draggable,
                icon: icon,
                position: {lat: lat, lng: lng},
            });

            if (draggable) {
                marker.addListener("mouseup", () => {
                    document.querySelector("input[name='lat']").value = marker.position.lat();
                    document.querySelector("input[name='lng']").value = marker.position.lng();
                    $("input[name='lat']").trigger("change");
                    $("input[name='lng']").trigger("change");
                });
            }
        }
    }

    var ControllerMap = Widget.extend({
        jsLibs: [],
        template: 'MapContainer',

        init: function (view, record, node) {
            this._super(view, record);
            this.lat = record.data.lat;
            this.lng = record.data.lng;

            this.mode = view.mode || "readonly";
            this.record = record;
            this.view = view;
        },

        willStart: function () {
            return this._super.apply(this, arguments).then(function () {
                if (typeof google !== "object" || typeof google.maps !== "object") {
                    initControllerGoogleMap(false, this.lat, this.lng, this.$el[0]);
                    setGoogleMap();
                    initMap();
                }
            });
        },

        start: function () {
            if (typeof google === "object") {
                initControllerGoogleMap(false, this.lat, this.lng, this.$el[0]);
                setGoogleMap();
                initMap();
            }
            return this._super();
        },
    });

    widgetRegistry.add('controller_map', ControllerMap);

    return {
        ControllerMap: ControllerMap,
    };
});

models.py

class Controller(models.Model):
    _name = 'smart_light.controller'
    _description = 'Controller model'

    name = fields.Char()
    dev_eui = fields.Char(size=16)
    power_status = fields.Boolean(string='Controller Status')
    lat = fields.Float(default=0, digits=(3, 15), string='Latitude')
    lng = fields.Float(default=0, digits=(3, 15), string='Longitude')
    alert = fields.Boolean()
    
#     map = fields.Char(default='*') 

views.xml

<odoo>
  <data>
    <record id="parking_form" model="ir.ui.view">
      <field name="name">Parking: form</field>
      <field name="model">smart_light.parking</field>
      <field name="arch" type="xml">
        <form>
          <sheet>
            <group>
              <field name="name"/>
              <field name="image" widget='image'/>
              <field name="emergency_contact_person"/>
              <field name="emergency_person_phone"/>
              <field name="controller_group_ids" readonly="1"/>
              <widget name="controller_map"/>
            </group>
          </sheet>
        </form>
      </field>
    </record>
  </data>
</odoo>