[MOV] website: move google map snippet from themes to community

Improve the base code and adapt to new website features as well.

Part of https://github.com/odoo/odoo/pull/49101
task-2091396

Co-authored-by: qsm-odoo <qsm@odoo.com>

16 files changed, 312 insertions, 0 deletions

diff --git a/addons/website/static/src/img/snippets_thumbs/s_google_map.png b/addons/website/static/src/img/snippets_thumbs/s_google_map.png
new file mode 100644
index 00000000000..5137e9ffb1c
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_google_map.png
diff --git a/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png b/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png
new file mode 100644
index 00000000000..cbfec358b70
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_google_map_marker.png
diff --git a/addons/website/static/src/snippets/s_google_map/000.js b/addons/website/static/src/snippets/s_google_map/000.js
new file mode 100644
index 00000000000..a59162a5f1a
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/000.js
@@ -0,0 +1,151 @@
+odoo.define('website.s_google_map', function (require) {
+'use strict';
+
+const ajax = require('web.ajax');
+const {_t} = require('web.core');
+const publicWidget = require('web.public.widget');
+
+let googleScriptLoadedResolve = null;
+const googleScriptLoaded = new Promise(resolve => googleScriptLoadedResolve = resolve);
+
+publicWidget.registry.GoogleMap = publicWidget.Widget.extend({
+    selector: '.s_google_map',
+    disabledInEditableMode: false,
+
+    mapColors: {
+        lightMonoMap: [{"featureType": "administrative.locality", "elementType": "all", "stylers": [{"hue": "#2c2e33"}, {"saturation": 7}, {"lightness": 19}, {"visibility": "on"}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"hue": "#ffffff"}, {"saturation": -100}, {"lightness": 100}, {"visibility": "simplified"}]}, {"featureType": "poi", "elementType": "all", "stylers": [{"hue": "#ffffff"}, {"saturation": -100}, {"lightness": 100}, {"visibility": "off"}]}, {"featureType": "road", "elementType": "geometry", "stylers": [{"hue": "#bbc0c4"}, {"saturation": -93}, {"lightness": 31}, {"visibility": "simplified"}]}, {"featureType": "road", "elementType": "labels", "stylers": [{"hue": "#bbc0c4"}, {"saturation": -93}, {"lightness": 31}, {"visibility": "on"}]}, {"featureType": "road.arterial", "elementType": "labels", "stylers": [{"hue": "#bbc0c4"}, {"saturation": -93}, {"lightness": -2}, {"visibility": "simplified"}]}, {"featureType": "road.local", "elementType": "geometry", "stylers": [{"hue": "#e9ebed"}, {"saturation": -90}, {"lightness": -8}, {"visibility": "simplified"}]}, {"featureType": "transit", "elementType": "all", "stylers": [{"hue": "#e9ebed"}, {"saturation": 10}, {"lightness": 69}, {"visibility": "on"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"hue": "#e9ebed"}, {"saturation": -78}, {"lightness": 67}, {"visibility": "simplified"}]}],
+        lillaMap: [{elementType: "labels", stylers: [{saturation: -20}]}, {featureType: "poi", elementType: "labels", stylers: [{visibility: "off"}]}, {featureType: 'road.highway', elementType: 'labels', stylers: [{visibility: "off"}]}, {featureType: "road.local", elementType: "labels.icon", stylers: [{visibility: "off"}]}, {featureType: "road.arterial", elementType: "labels.icon", stylers: [{visibility: "off"}]}, {featureType: "road", elementType: "geometry.stroke", stylers: [{visibility: "off"}]}, {featureType: "transit", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "poi", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "poi.government", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "poi.sport_complex", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "poi.attraction", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "poi.business", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "transit", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "transit.station", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "landscape", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "road", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "road.highway", elementType: "geometry.fill", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}, {featureType: "water", elementType: "geometry", stylers: [{hue: '#2d313f'}, {visibility: "on"}, {lightness: 5}, {saturation: -20}]}],
+        blueMap: [{stylers: [{hue: "#00ffe6"}, {saturation: -20}]}, {featureType: "road", elementType: "geometry", stylers: [{lightness: 100}, {visibility: "simplified"}]}, {featureType: "road", elementType: "labels", stylers: [{visibility: "off"}]}],
+        retroMap: [{"featureType": "administrative", "elementType": "all", "stylers": [{"visibility": "on"}, {"lightness": 33}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2e5d4"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#c5dac6"}]}, {"featureType": "poi.park", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": 20}]}, {"featureType": "road", "elementType": "all", "stylers": [{"lightness": 20}]}, {"featureType": "road.highway", "elementType": "geometry", "stylers": [{"color": "#c5c6c6"}]}, {"featureType": "road.arterial", "elementType": "geometry", "stylers": [{"color": "#e4d7c6"}]}, {"featureType": "road.local", "elementType": "geometry", "stylers": [{"color": "#fbfaf7"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"visibility": "on"}, {"color": "#acbcc9"}]}],
+        flatMap: [{"stylers": [{"visibility": "off"}]}, {"featureType": "road", "stylers": [{"visibility": "on"}, {"color": "#ffffff"}]}, {"featureType": "road.arterial", "stylers": [{"visibility": "on"}, {"color": "#fee379"}]}, {"featureType": "road.highway", "stylers": [{"visibility": "on"}, {"color": "#fee379"}]}, {"featureType": "landscape", "stylers": [{"visibility": "on"}, {"color": "#f3f4f4"}]}, {"featureType": "water", "stylers": [{"visibility": "on"}, {"color": "#7fc8ed"}]}, {}, {"featureType": "road", "elementType": "labels", "stylers": [{"visibility": "on"}]}, {"featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{"visibility": "on"}, {"color": "#83cead"}]}, {"elementType": "labels", "stylers": [{"visibility": "on"}]}, {"featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{"weight": 0.9}, {"visibility": "off"}]}],
+        cobaltMap: [{"featureType": "all", "elementType": "all", "stylers": [{"invert_lightness": true}, {"saturation": 10}, {"lightness": 30}, {"gamma": 0.5}, {"hue": "#435158"}]}],
+        cupertinoMap: [{"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#a2daf2"}]}, {"featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{"color": "#f7f1df"}]}, {"featureType": "landscape.natural", "elementType": "geometry", "stylers": [{"color": "#d0e3b4"}]}, {"featureType": "landscape.natural.terrain", "elementType": "geometry", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#bde6ab"}]}, {"featureType": "poi", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.medical", "elementType": "geometry", "stylers": [{"color": "#fbd3da"}]}, {"featureType": "poi.business", "stylers": [{"visibility": "off"}]}, {"featureType": "road", "elementType": "geometry.stroke", "stylers": [{"visibility": "off"}]}, {"featureType": "road", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#ffe15f"}]}, {"featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{"color": "#efd151"}]}, {"featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{"color": "#ffffff"}]}, {"featureType": "road.local", "elementType": "geometry.fill", "stylers": [{"color": "black"}]}, {"featureType": "transit.station.airport", "elementType": "geometry.fill", "stylers": [{"color": "#cfb2db"}]}],
+        carMap: [{"featureType": "administrative", "stylers": [{"visibility": "off"}]}, {"featureType": "poi", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road", "stylers": [{"visibility": "simplified"}]}, {"featureType": "water", "stylers": [{"visibility": "simplified"}]}, {"featureType": "transit", "stylers": [{"visibility": "simplified"}]}, {"featureType": "landscape", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road.highway", "stylers": [{"visibility": "off"}]}, {"featureType": "road.local", "stylers": [{"visibility": "on"}]}, {"featureType": "road.highway", "elementType": "geometry", "stylers": [{"visibility": "on"}]}, {"featureType": "water", "stylers": [{"color": "#84afa3"}, {"lightness": 52}]}, {"stylers": [{"saturation": -77}]}, {"featureType": "road"}],
+        bwMap: [{stylers: [{hue: "#00ffe6"}, {saturation: -100}]}, {featureType: "road", elementType: "geometry", stylers: [{lightness: 100}, {visibility: "simplified"}]}, {featureType: "road", elementType: "labels", stylers: [{visibility: "off"}]}],
+    },
+
+    /**
+     * @override
+     */
+    async start() {
+        await this._super(...arguments);
+
+        if (typeof google !== 'object' || typeof google.maps !== 'object') {
+            if (!publicWidget.registry.GoogleMap.isScriptLoading) {
+                publicWidget.registry.GoogleMap.isScriptLoading = true;
+                const self = this;
+                window.odoo_s_google_map_redraw_all = function odoo_s_google_map_redraw_all() {
+                    for (const map of $('section.s_google_map')) {
+                        self.trigger_up('widgets_start_request', {
+                            editableMode: self.editableMode,
+                            $target: $(map),
+                        });
+                    }
+                    publicWidget.registry.GoogleMap.isScriptLoading = false;
+                    googleScriptLoadedResolve();
+                };
+
+                const data = await this._rpc({
+                    route: '/website/google_maps_api_key',
+                });
+
+                const key = JSON.parse(data).google_maps_api_key;
+                if (!key) {
+                    publicWidget.registry.GoogleMap.isScriptLoading = false;
+                    if (this.editableMode) {
+                        this.$loadingWarning = $('<div/>', {
+                            class: 'alert alert-warning alert-link',
+                        }).append($('<a/>', {
+                            href: "#",
+                            text: _t("Cannot load google map, check your configuration !"),
+                        })).click(function (e) {
+                            window.location.href = "/web#action=website.action_website_configuration";
+                        });
+                        this.$('.map_container').append(this.$loadingWarning);
+                    }
+                    return;
+                }
+                await ajax.loadJS(`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=odoo_s_google_map_redraw_all&key=${key}`);
+            }
+            // The animation will be restarted for all maps as soon as the
+            // google map script has been executed.
+            return;
+        }
+
+        // Define a default map's colors set
+        const std = [];
+        new google.maps.StyledMapType(std, {name: "Std Map"});
+
+        // Default options, will be overwritten by the user
+        const myOptions = {
+            zoom: 12,
+            center: new google.maps.LatLng(50.854975, 4.3753899),
+            mapTypeId: google.maps.MapTypeId.ROADMAP,
+            panControl: false,
+            zoomControl: false,
+            mapTypeControl: false,
+            streetViewControl: false,
+            scrollwheel: false,
+            mapTypeControlOptions: {
+                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
+            }
+        };
+
+        // Render Map
+        const mapC = this.$('.map_container');
+        const map = new google.maps.Map(mapC.get(0), myOptions);
+
+        // Update GPS position
+        const p = this.el.dataset.mapGps.substring(1).slice(0, -1).split(',');
+        const gps = new google.maps.LatLng(p[0], p[1]);
+        map.setCenter(gps);
+
+        // Update Map on screen resize
+        google.maps.event.addDomListener(window, 'resize', () => {
+            map.setCenter(gps);
+        });
+
+        // Create Marker & Infowindow
+        const markerOptions = {
+            map: map,
+            animation: google.maps.Animation.DROP,
+            position: new google.maps.LatLng(p[0], p[1])
+        };
+        if (this.el.dataset.pinStyle === 'flat') {
+            markerOptions.icon = '/website/static/src/img/snippets_thumbs/s_google_map_marker.png';
+        }
+        new google.maps.Marker(markerOptions);
+
+        map.setMapTypeId(google.maps.MapTypeId[this.el.dataset.mapType]); // Update Map Type
+        map.setZoom(parseInt(this.el.dataset.mapZoom)); // Update Map Zoom
+
+        // Update Map Color
+        const mapColorAttr = this.el.dataset.mapColor;
+        if (mapColorAttr) {
+            const mapColor = this.mapColors[mapColorAttr];
+            map.mapTypes.set('map_style', new google.maps.StyledMapType(mapColor, {name: "Styled Map"}));
+            map.setMapTypeId('map_style');
+        }
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        if (this.$loadingWarning) {
+            this.$loadingWarning.remove();
+        }
+    },
+});
+
+// This allows to save if the google maps script is already loading or not.
+// This script cannot be loaded 2 times, so if we have 2 snippets in the same
+// page we don't want to load the script 2 times.
+// And we cannot put the script in an asset because we don't want to load it
+// on each page, but only on pages with a google maps snippet...
+publicWidget.registry.GoogleMap.prototype.isScriptLoading = false;
+
+return {
+    googleScriptLoaded: googleScriptLoaded,
+};
+});
diff --git a/addons/website/static/src/snippets/s_google_map/000.scss b/addons/website/static/src/snippets/s_google_map/000.scss
new file mode 100644
index 00000000000..4e13cb07941
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/000.scss
@@ -0,0 +1,54 @@
+
+$s-google-map-desc-bg: theme-color('primary') !default;
+$s-google-map-desc-alpha: 0.80 !default;
+$s-google-map-desc-hover-bg: theme-color('primary') !default;
+$s-google-map-desc-hover-alpha: 0.55 !default;
+
+.s_google_map {
+    height: 100%;
+    min-height: 100px;
+    position: relative;
+
+    .map_container {
+        @include o-position-absolute(0, 0, 0, 0);
+    }
+    .description {
+        @include o-position-absolute(auto, 0, 0, 0);
+        z-index: 99;
+        padding: 0 1em;
+        background: rgba($s-google-map-desc-bg , $s-google-map-desc-alpha);
+        color: color-yiq(rgba($s-google-map-desc-bg , $s-google-map-desc-alpha));
+        transition: background-color 250ms ease;
+
+        font {
+            float: left;
+            margin-top: 20px;
+            margin-bottom: 15px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        span {
+            float: left;
+            text-transform: none;
+            font-weight: normal;
+            margin-top: 20px;
+            margin-left: 10px;
+        }
+    }
+    &:hover .description {
+        background: $s-google-map-desc-hover-bg;
+        background: rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha);
+        color: color-yiq(rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha));
+    }
+}
+
+#mapModal {
+    z-index: 3000;
+}
+.pac-container { // google map autosuggestion
+    z-index: 3001;
+
+    &:after {
+        display: none;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg
new file mode 100644
index 00000000000..a929e345175
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg
new file mode 100644
index 00000000000..1dad96b4ee8
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg
new file mode 100644
index 00000000000..55f1046cdbf
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg
new file mode 100644
index 00000000000..dc0aa590424
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg
new file mode 100644
index 00000000000..06c97ae07c5
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg
new file mode 100644
index 00000000000..ea5c83602e3
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg
new file mode 100644
index 00000000000..9b4df178617
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg
new file mode 100644
index 00000000000..17e23249872
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg
new file mode 100644
index 00000000000..62a19e7ce3f
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg
new file mode 100644
index 00000000000..2c36791bddf
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg
diff --git a/addons/website/static/src/snippets/s_google_map/options.js b/addons/website/static/src/snippets/s_google_map/options.js
new file mode 100644
index 00000000000..9b27d815a66
--- /dev/null
+++ b/addons/website/static/src/snippets/s_google_map/options.js
@@ -0,0 +1,78 @@
+odoo.define('options.s_google_map_options', function (require) {
+'use strict';
+
+const {Dialog} = require('web_editor.widget');
+const {_t, qweb} = require('web.core');
+const options = require('web_editor.snippets.options');
+const {googleScriptLoaded} = require('website.s_google_map');
+
+options.registry.GoogleMap = options.Class.extend({
+    xmlDependencies: ['/website/static/src/xml/s_google_map_modal.xml'],
+    defaultLocation: '(50.854975,4.3753899)',
+
+    /**
+     * @override
+     */
+    onBuilt() {
+        this._super(...arguments);
+
+        let widget = null;
+        this.trigger_up('user_value_widget_request', {
+            name: 'map_options_opt',
+            onSuccess: _widget => widget = _widget,
+        });
+        widget.$el.click();
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Opens the customization dialog.
+     *
+     * @see this.selectClass for parameters
+     */
+    async map(previewMode, widgetValue, params) {
+        await new Promise(resolve => {
+            this.dialog = new Dialog(this, {
+                size: 'medium',
+                title: _t("Customize your map"),
+                buttons: [
+                    {text: _t("Save"), classes: 'btn-primary', close: true, click: () => {
+                        if (!this.dialog.$('#placeBk').val()) {
+                            this.dialog.$('#placeBk').val(this.defaultLocation);
+                        }
+                        this.$target[0].dataset.mapGps = this.dialog.$('#placeBk').val();
+                        this.$target[0].dataset.pinStyle = this.dialog.$('#pin_style').val();
+                        this.$target[0].dataset.pinAddress = this.dialog.$('#pin_address').val();
+                    }},
+                    {text: _t("Cancel"), close: true}
+                ],
+                $content: $(qweb.render('website.s_google_map_modal'))
+            });
+
+            this.dialog.opened().then(() => {
+                this.dialog.$('#pin_address').val(this.$target[0].dataset.pinAddress);
+                this.dialog.$('#pin_style').val(this.$target[0].dataset.pinStyle);
+                this.dialog.$('#placeBk').val(this.$target[0].dataset.mapGps);
+                const autocomplete = new google.maps.places.Autocomplete(this.dialog.$('#pin_address').get(0), {types: ['geocode']});
+                google.maps.event.addListener(autocomplete, 'place_changed', () => {
+                    const place = autocomplete.getPlace();
+                    this.dialog.$('#placeBk').val(place.geometry ? place.geometry.location : this.defaultLocation);
+                });
+            });
+
+            this.dialog.on('closed', this, () => resolve());
+
+            googleScriptLoaded.then(() => this.dialog.open());
+        });
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    resetMapColor(previewMode, widgetValue, params) {
+        this.$target[0].dataset.mapColor = '';
+    },
+});
+});
diff --git a/addons/website/static/src/xml/s_google_map_modal.xml b/addons/website/static/src/xml/s_google_map_modal.xml
new file mode 100644
index 00000000000..407e27d5acb
--- /dev/null
+++ b/addons/website/static/src/xml/s_google_map_modal.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <div t-name="website.s_google_map_modal">
+        <div class="form-group form-row">
+            <label for="pin_address" class="col-md-3 col-form-label text-right">Address</label>
+            <div class="col-md-9">
+                <div class="input-group">
+                    <div class="input-group-prepend">
+                        <div class="input-group-text"><i class="fa fa-building-o"/></div>
+                    </div>
+                    <input type="text" class="form-control" id="pin_address" placeholder="Your address"/>
+                    <input type="hidden" id="placeBk"/>
+                </div>
+            </div>
+            <div class="col-md-9 offset-md-3">
+                <small class="form-text">e.g. De Brouckere, Brussels, Belgium</small>
+            </div>
+        </div>
+        <div class="form-group form-row">
+            <label for="pin_style" class="col-md-3 col-form-label text-right">Marker Style</label>
+            <div class="col-md-9">
+                <select id="pin_style" name="pin_style" class="col-md-5">
+                    <option value="flat">Flat</option>
+                    <option>Default</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</templates>