Search 1.9 billion lines of Odoo code on GitHub
web_view_google_map
<h1 class="title">Google Map View</h1>
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/geospatial/tree/12.0/web_view_google_map"><img alt="OCA/geospatial" src="https://img.shields.io/badge/github-OCA%2Fgeospatial-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/geospatial-12-0/geospatial-12-0-web_view_google_map"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/115/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<dl class="docutils">
<dt>This module contains three new features:</dt>
<dd><ul class="first last simple">
<li>New view type and mode <cite>"map"</cite></li>
<li>New widget <cite>"gplaces_address_autocomplete"</cite></li>
<li>New widget <cite>"gplaces_autocomplete"</cite></li>
</ul>
</dd>
</dl>
<p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents">
<ul class="simple">
<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
<li><a class="reference internal" href="#bug-tracker" id="id2">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="id3">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="id4">Authors</a></li>
<li><a class="reference internal" href="#contributors" id="id5">Contributors</a></li>
<li><a class="reference internal" href="#maintainers" id="id6">Maintainers</a></li>
</ul>
</li>
</ul>
</div>
<a name="usage"></a>
<h2><a class="toc-backref" href="#id1">Usage</a></h2>
<p>Map view <cite>"map"</cite>:-</p>
<p>Basically, this new view <cite>map</cite> will integrate Google Maps into Odoo.
Enable you to display <cite>res.partner</cite> geolocation on map or any model contains geolocation.
This feature will work seamlessly with Odoo means you can search your partner location using Odoo search feature.</p>
<p>There are five available attributes that you can customize:-</p>
<blockquote>
<ul class="simple">
<li><cite>lat</cite> : an attritube to tell the map the latitude field on the object __[mandatory]__</li>
<li><cite>lng</cite> : an attritute to tell the map the longitude field on the object __[mandatory]__</li>
<li><cite>color</cite> : an attribute to modify marker color (optional) any given color will set all markers color __[optional]__.</li>
<li><cite>colors</cite> : work like attribute <cite>color</cite> but more configurable (you can set marker color depends on it's value) this attribute works similar to <cite>colors</cite> of tree view on Odoo __[optional]__</li>
<li><dl class="first docutils">
<dt><cite>library</cite> <span class="classifier-delimiter">:</span> <span class="classifier">an attribute to tell map which map that will be loaded __[mandatory]__.</span></dt>
<dd>This options has two values:
1. <cite>geometry</cite>
2. <cite>drawing</cite></dd>
</dl>
</li>
</ul>
</blockquote>
<p>The XML Map view definitions. For instance:</p>
<pre>
<code><record id="view_res_partner_map" model="ir.ui.view">
<field name="name">view.res.partner.map</field>
<field name="model">res.partner</field>
<field name="arch" type="xml">
<map class="o_res_partner_map" library='geometry' string="Map" lat="partner_latitude" lng="partner_longitude" colors="blue:company_type=='person';green:company_type=='company';">
<field name="id"/>
<field name="partner_latitude"/>
<field name="partner_longitude"/>
<field name="company_type"/>
<field name="color"/>
<field name="display_name"/>
<field name="title"/>
<field name="email"/>
<field name="parent_id"/>
<field name="is_company"/>
<field name="function"/>
<field name="phone"/>
<field name="street"/>
<field name="street2"/>
<field name="zip"/>
<field name="city"/>
<field name="country_id"/>
<field name="mobile"/>
<field name="state_id"/>
<field name="category_id"/>
<field name="image_small"/>
<field name="type"/>
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_global_click o_res_partner_kanban">
<div class="o_kanban_image">
<t t-if="record.image_small.raw_value">
<img t-att-src="kanban_image('res.partner', 'image_small', record.id.raw_value)"/>
</t>
<t t-if="!record.image_small.raw_value">
<t t-if="record.type.raw_value === 'delivery'">
<img t-att-src='_s + "/base/static/src/img/truck.png"' class="o_kanban_image oe_kanban_avatar_smallbox"/>
</t>
<t t-if="record.type.raw_value === 'invoice'">
<img t-att-src='_s + "/base/static/src/img/money.png"' class="o_kanban_image oe_kanban_avatar_smallbox"/>
</t>
<t t-if="record.type.raw_value != 'invoice' &amp;&amp; record.type.raw_value != 'delivery'">
<t t-if="record.is_company.raw_value === true">
<img t-att-src='_s + "/base/static/src/img/company_image.png"'/>
</t>
<t t-if="record.is_company.raw_value === false">
<img t-att-src='_s + "/base/static/src/img/avatar.png"'/>
</t>
</t>
</t>
</div>
<div class="oe_kanban_details">
<strong class="o_kanban_record_title oe_partner_heading">
<field name="display_name"/>
</strong>
<div class="o_kanban_tags_section oe_kanban_partner_categories">
<span class="oe_kanban_list_many2many">
<field name="category_id" widget="many2many_tags" options="{'color_field': 'color'}"/>
</span>
</div>
<ul>
<li t-if="record.parent_id.raw_value and !record.function.raw_value">
<field name="parent_id"/>
</li>
<li t-if="!record.parent_id.raw_value and record.function.raw_value">
<field name="function"/>
</li>
<li t-if="record.parent_id.raw_value and record.function.raw_value">
<field name="function"/> at <field name="parent_id"/>
</li>
<li t-if="record.city.raw_value and !record.country_id.raw_value">
<field name="city"/>
</li>
<li t-if="!record.city.raw_value and record.country_id.raw_value">
<field name="country_id"/>
</li>
<li t-if="record.city.raw_value and record.country_id.raw_value">
<field name="city"/>
, <field name="country_id"/>
</li>
<li t-if="record.email.raw_value" class="o_text_overflow">
<field name="email"/>
</li>
</ul>
<div class="oe_kanban_partner_links"/>
</div>
</div>
</t>
</templates>
</map>
</field>
</record>
<record id="action_partner_map" model="ir.actions.act_window">
...
<field name="view_type">form</field>
<field name="view_mode">tree,form,map</field>
...
</record></code>
</pre>
<p>The marker info window will use <cite>kanban-box</cite> kanban card style.</p>
<p>How to setup color for marker on map?</p>
<p>There are two attributes:</p>
<blockquote>
<ul class="simple">
<li><cite>colors</cite>: Allow you to display different marker color to represent a record on map</li>
<li><cite>color</cite>: One marker color for all records on map</li>
</ul>
</blockquote>
<p>The XML color view definitions. For instance:</p>
<pre>
<code><!-- colors -->
<map string="Map" lat="partner_latitude" lng="partner_longitude" colors="green:company_type=='person';blue:company_type=='company';">
...
</map>
<!-- color -->
<map string="Map" lat="partner_latitude" lng="partner_longitude" color="orange">
...
</map></code>
</pre>
<p>New widget <cite>"gplaces_address_autocomplete"</cite>:-</p>
<p>New widget to integrate [Place Autocomplete Address Form](<a class="reference external" href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform">https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform</a>) in Odoo.</p>
<p>The widget has four options that can be modify:</p>
<blockquote>
<ul class="simple">
<li><cite>component_form</cite></li>
<li><cite>fillfields</cite></li>
<li><cite>lat</cite></li>
<li><cite>lng</cite></li>
</ul>
</blockquote>
<p>Component form <cite>component_form</cite>:-</p>
<p>Is an option used to modify which value you want to take from an objects returned by the geocoder.
Full documentation about Google component types can be found [here](<a class="reference external" href="https://developers.google.com/maps/documentation/geocoding/intro#Types">https://developers.google.com/maps/documentation/geocoding/intro#Types</a>)</p>
<p>By default this option are configured like the following javascript value:</p>
<pre>
<code>{
'street_number': 'long_name',
'route': 'long_name',
'intersection': 'short_name',
'political': 'short_name',
'country': 'short_name',
'administrative_area_level_1': 'short_name',
'administrative_area_level_2': 'short_name',
'administrative_area_level_3': 'short_name',
'administrative_area_level_4': 'short_name',
'administrative_area_level_5': 'short_name',
'colloquial_area': 'short_name',
'locality': 'short_name',
'ward': 'short_name',
'sublocality_level_1': 'short_name',
'sublocality_level_2': 'short_name',
'sublocality_level_3': 'short_name',
'sublocality_level_5': 'short_name',
'neighborhood': 'short_name',
'premise': 'short_name',
'postal_code': 'short_name',
'natural_feature': 'short_name',
'airport': 'short_name',
'park': 'short_name',
'point_of_interest': 'long_name'
}</code>
</pre>
<p>This configuration can be modify into xml view field definition:</p>
<pre>
<code><record id="view_res_partner_form" model="ir.ui.view">
...
<field name="arch" type="xml">
...
<field name="street" widget="gplaces_address_form" options="{'component_form': {'street_number': 'short_name'}}"/>
...
</field>
</record></code>
</pre>
<p>Fill fields <cite>fillfields</cite>:-</p>
<p>Is an option that will be influenced by <cite>gplaces_address_autocomplete</cite> widget.</p>
<p>This options should contains known <cite>fields</cite> that you want the widget to fulfill a value for each given field automatically.
A field can contains one or multiple elements of component form
By default this options are configured like the following javascript value:</p>
<pre>
<code>{
'street': ['street_number', 'route'],
'street2': ['administrative_area_level_3', 'administrative_area_level_4', 'administrative_area_level_5'],
'city': ['locality', 'administrative_area_level_2'],
'zip': 'postal_code',
'state_id': 'administrative_area_level_1',
'country_id': 'country',
}</code>
</pre>
<p>This configuration can be modify into xml view field definition as well:</p>
<pre>
<code><record id="view_res_partner_form" model="ir.ui.view">
...
<field name="arch" type="xml">
...
<field name="street" widget="google_places" options="{'fillfields': {'street2': ['route', 'street_number']}}"/>
...
</field>
</record></code>
</pre>
<p>Latitude <cite>lat</cite> and Longitude <cite>lng</cite>:-</p>
<p>This options tell the widget the fields geolocation, in order to have this fields filled automatically.</p>
<p>New widget <cite>"gplaces_autocomplete"</cite>:-</p>
<p>New widget to integrate [Place Autocomplete](<a class="reference external" href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete">https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete</a>) in Odoo.
This widget have similar configuration to <cite>gplaces_address_autocomplete</cite>.</p>
<p>Component form <cite>component_form</cite>:-</p>
<p>Same configuration of <cite>gplaces_address_autocomplete</cite> component form</p>
<p>Fill fields <cite>fillfields</cite>:-</p>
<p>This configuration works similar to <cite>gplaces_address_autocomplete</cite>.
By default this options are configured like following javascript value:</p>
<pre>
<code>{
general: {
name: 'name',
website: 'website',
phone: ['international_phone_number', 'formatted_phone_number']
},
geolocation: {
partner_latitude: 'latitude',
partner_longitude: 'longitude'
},
address: {
street: ['street_number', 'route'],
street2: ['administrative_area_level_3', 'administrative_area_level_4', 'administrative_area_level_5'],
city: ['locality', 'administrative_area_level_2'],
zip: 'postal_code',
state_id: 'administrative_area_level_1',
country_id: 'country'
}
};</code>
</pre>
<a name="bug-tracker"></a>
<h2><a class="toc-backref" href="#id2">Bug Tracker</a></h2>
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/geospatial/issues">GitHub Issues</a>.
In case of trouble, please check there if your issue has already been reported.
If you spotted it first, help us smashing it by providing a detailed and welcomed
<a class="reference external" href="https://github.com/OCA/geospatial/issues/new?body=module:%20web_view_google_map%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
<p>Do not contact contributors directly about support or help with technical issues.</p>
<a name="credits"></a>
<h2><a class="toc-backref" href="#id3">Credits</a></h2>
<a name="authors"></a>
<h3><a class="toc-backref" href="#id4">Authors</a></h3>
<ul class="simple">
<li>Open Source Integrators</li>
</ul>
<a name="contributors"></a>
<h3><a class="toc-backref" href="#id5">Contributors</a></h3>
<ul class="simple">
<li>Yopi Angi <<a class="reference external" href="mailto:yopiangi@gmail.com">yopiangi@gmail.com</a>></li>
<li>Wolfgang Hall <<a class="reference external" href="mailto:whall@opensourceintegrators.com">whall@opensourceintegrators.com</a>></li>
<li>Serpent Consulting Services Pvt. Ltd. <<a class="reference external" href="mailto:support@serpentcs.com">support@serpentcs.com</a>></li>
</ul>
<a name="maintainers"></a>
<h3><a class="toc-backref" href="#id6">Maintainers</a></h3>
<p>This module is maintained by the OCA.</p>
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
<p>OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.</p>
<p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainers</a>:</p>
<p><a class="reference external" href="https://github.com/gityopie"><img alt="gityopie" src="https://github.com/gityopie.png?size=40px" /></a> <a class="reference external" href="https://github.com/wolfhall"><img alt="wolfhall" src="https://github.com/wolfhall.png?size=40px" /></a></p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/geospatial/tree/12.0/web_view_google_map">OCA/geospatial</a> project on GitHub.</p>
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>